kaiido使用fetch的更现代版本的答案是:

function toObjectUrl(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

编辑:正如评论中指出的那样，这将返回一个指向本地系统中的文件的对象url，而不是实际的DataURL，因此根据您的用例，这可能不是您所需要的。

您可以查看下面的答案来使用fetch和一个实际的dataURL: https://stackoverflow.com/a/50463054/599602

注意:只有当图像与页面来自相同的域，或者具有crossOrigin="anonymous"属性，并且服务器支持CORS时，这才有效。它也不会给你原始文件，而是一个重新编码的版本。如果您需要结果与原始相同，请参阅Kaiido的回答。

您需要创建一个具有正确尺寸的画布元素，并使用drawImage函数复制图像数据。然后，您可以使用toDataURL函数来获得具有base-64编码图像的data: url。注意，图像必须是完全加载的，否则你只会得到一个空的(黑色，透明)图像。

大概是这样的。我从未编写过Greasemonkey脚本，因此您可能需要调整代码以在该环境中运行。

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

在旧版本(3.5左右)的Firefox上无法获取jpeg格式的图像，因此如果您希望支持该格式，则需要检查兼容性。如果编码不支持，它将默认为“image/png”。

这个函数接受URL，然后返回BASE64图像

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

这样叫它: getBase64FromImageUrl(“图像/ slbltxt.png”)

使用onload事件转换图像加载后

函数加载(img) { 让c = document.createElement('canvas') c.getContext (2 d)。drawImage(img, 0,0) 味精。innerText = c.toDataURL实现(); ｝ Pre {word-wrap: break-word;宽度:500 px;空白:pre-wrap;｝ <img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/> < pre id =“味精”> < / >之前

kaiido使用fetch的更现代版本的答案是:

function toObjectUrl(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

编辑:正如评论中指出的那样，这将返回一个指向本地系统中的文件的对象url，而不是实际的DataURL，因此根据您的用例，这可能不是您所需要的。

您可以查看下面的答案来使用fetch和一个实际的dataURL: https://stackoverflow.com/a/50463054/599602

这就是你需要阅读的全部内容。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString

var height = 200;
var width  = 200;

canvas.width  = width;
canvas.height = height;

var ctx = canvas.getContext('2d');

ctx.strokeStyle = '#090';
ctx.beginPath();
ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
ctx.stroke();

canvas.toBlob(function (blob) {
  //consider blob is your file object

  var reader = new FileReader();

  reader.onload = function () {
    console.log(reader.result);
  }

  reader.readAsBinaryString(blob);
});