它的2022年，我更喜欢使用现代createImageBitmap()而不是onload事件。

*注意:图像应该是相同的来源或CORS启用

async function imageToDataURL(imageUrl) { let img = await fetch(imageUrl); img = await img.blob(); let bitmap = await createImageBitmap(img); let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = bitmap.width; canvas.height = bitmap.height; ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height); return canvas.toDataURL("image/png"); // image compression? // return canvas.toDataURL("image/png", 0.9); }; (async() => { let dataUrl = await imageToDataURL('https://en.wikipedia.org/static/images/project-logos/enwiki.png') wikiImg.src = dataUrl; console.log(dataUrl) })(); <img id="wikiImg">

它的2022年，我更喜欢使用现代createImageBitmap()而不是onload事件。

*注意:图像应该是相同的来源或CORS启用

async function imageToDataURL(imageUrl) { let img = await fetch(imageUrl); img = await img.blob(); let bitmap = await createImageBitmap(img); let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = bitmap.width; canvas.height = bitmap.height; ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height); return canvas.toDataURL("image/png"); // image compression? // return canvas.toDataURL("image/png", 0.9); }; (async() => { let dataUrl = await imageToDataURL('https://en.wikipedia.org/static/images/project-logos/enwiki.png') wikiImg.src = dataUrl; console.log(dataUrl) })(); <img id="wikiImg">

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

Shiv / shim / sham

如果你的图像已经加载(或没有加载)，这个“工具”可能会派上用场:

Object.defineProperty
(
    HTMLImageElement.prototype,'toDataURL',
    {enumerable:false,configurable:false,writable:false,value:function(m,q)
    {
        let c=document.createElement('canvas');
        c.width=this.naturalWidth; c.height=this.naturalHeight;
        c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
    }}
);

. .但是为什么呢?

这样做的好处是使用“已经加载”的图像数据，因此不需要额外的请求。此外，它还允许最终用户(像您这样的程序员)决定CORS和/或mime类型和质量- or -您可以省略MDN规范中描述的这些参数/参数。

如果你已经加载了这个JS(在需要它之前)，那么转换为dataURL就像这样简单:

例子

HTML

<img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">

JS

console.log(document.getElementById("someImgID").toDataURL());

GPU指纹

如果您担心比特的“精确性”，那么您可以根据@Kaiido的回答修改这个工具以满足您的需求。

这个函数接受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”)

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

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);
});