获取JavaScript中的图像数据URL？

我有一个带有一些图像的常规HTML页面（只有常规的

HTML标记）。我希望获得他们的内容，最好是base64编码，而不需要重新下载图像（即，它已经由浏览器加载，所以现在我想要内容）

---

我希望通过Greasemonkey和Firefox实现这一点。

注意：只有当图像与页面来自同一域，或者具有

crossOrigin=“anonymous”

属性且服务器支持CORS时，此功能才有效。它也不会提供原始文件，而是重新编码的版本。如果需要与原始结果相同，请参阅

---

您需要创建具有正确尺寸的画布元素，并使用

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,/, "");
}

---

获取JPEG格式的图像在旧版本（大约3.5版）的Firefox上不起作用，因此如果你想支持它，你需要检查兼容性。如果不支持编码，它将默认为“image/png”。

注意：仅当图像与页面来自同一域，或者具有

crossOrigin=“anonymous”

属性且服务器支持CORS时，此功能才起作用。它也不会提供原始文件，而是重新编码的版本。如果需要与原始结果相同，请参阅

---

您需要创建具有正确尺寸的画布元素，并使用

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,/, "");
}

---

获取JPEG格式的图像在旧版本（大约3.5版）的Firefox上不起作用，因此如果你想支持它，你需要检查兼容性。如果不支持编码，它将默认为“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（“images/slbltxt.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（“images/slbltxt.png”）

之后很久才会出现，但这里没有一个答案是完全正确的

在画布上绘制时，传递的图像将被解压缩+所有预乘。
导出时，将使用不同的算法对其进行解压缩或重新压缩，并取消相乘

在此过程中，所有浏览器和设备都会出现不同的舍入错误
（见附件）

因此，如果想要一个base64版本的图像文件，他们必须再次请求它（大部分时间它来自缓存），但这次是一个Blob

然后，您可以使用将其作为ArrayBuffer或dataURL读取

函数toDataURL（url，回调）{ var xhr=new XMLHttpRequest（）； xhr.open（'get'，url）； xhr.responseType='blob'； xhr.onload=函数（）{ var fr=new FileReader（）； fr.onload=函数（）{ 回调（this.result）； }; fr.readAsDataURL（xhr.response）；//异步调用 }; xhr.send（）； } toDataURL（myImage.src，函数（dataURL）{ result.src=dataURL； //现在只想说明传递到画布的结果并不相同 var canvas=document.createElement（'canvas'）； canvas.width=myImage.naturalWidth； canvas.height=myImage.naturalHeight； canvas.getContext（'2d'）.drawImage（myImage，0,0）； console.log（canvas.toDataURL（）==dataURL）；//false-数据不同 });

---

之后很久才会出现，但这里没有一个答案是完全正确的

在画布上绘制时，传递的图像将被解压缩+所有预乘。
导出时，将使用不同的算法对其进行解压缩或重新压缩，并取消相乘

在此过程中，所有浏览器和设备都会出现不同的舍入错误
（见附件）

因此，如果想要一个base64版本的图像文件，他们必须再次请求它（大部分时间它来自缓存），但这次是一个Blob

然后，您可以使用将其作为ArrayBuffer或dataURL读取

函数toDataURL（url，回调）{ var xhr=new XMLHttpRequest（）； xhr.open（'get'，url）； xhr.responseType='blob'； xhr.onload=函数（）{ var fr=new FileReader（）； fr.onload=函数（）{ 回调（this.result）； }; fr.readAsDataURL（xhr.response）；//异步调用 }; xhr.send（）； } toDataURL（myImage.src，函数（dataURL）{ result.src=dataURL； //现在只想说明传递到画布的结果并不相同 var canvas=document.createElement（'canvas'）； canvas.width=myImage.naturalWidth； canvas.height=myImage.naturalHeight； canvas.getContext（'2d'）.drawImage（myImage，0,0）； console.log（canvas.toDataURL（）==dataURL）；//false-数据不同 });

---

Kaido使用fetch的答案的更现代版本是：

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

编辑：正如注释中指出的，这将返回一个指向本地系统中文件的对象url，而不是实际的DataURL，因此根据您的使用情况，这可能不是您所需要的

---

您可以查看下面的答案来使用fetch和一个实际的dataURL:

一个更现代的kaido的ans版本

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

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

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