用JavaScript获取图像数据？

Question

我有一个带有一些图像的常规HTML页面(只是常规的<img />HTML标签).我想得到他们的内容,优选base64编码,而不需要重新下载图像(即它已经被浏览器加载,所以现在我想要内容).

我很想用Greasemonkey和Firefox实现这一目标.

Answer 1

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

您需要创建具有正确尺寸的canvas元素,并使用该drawImage函数复制图像数据.然后,您可以使用该toDataURL函数获取数据:具有base-64编码图像的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格式的图像不适用于Firefox的旧版本(大约3.5),因此如果您想支持它,则需要检查兼容性.如果不支持编码,则默认为"image/png".

Answer 2

此函数接受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")

Answer 3

很久以后,但这里没有一个答案是完全正确的.

在画布上绘制时,传递的图像未压缩+全部预乘.
导出时,使用不同的算法对其进行未压缩或重新压缩,并且不成倍增加.

所有浏览器和设备在此过程中都会发生不同的舍入错误
(请参阅Canvas指纹识别).

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

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

function toDataURL(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
    
      fr.onload = function(){
        callback(this.result);
      };
    
      fr.readAsDataURL(xhr.response); // async call
    };
    
    xhr.send();
}

toDataURL(myImage.src, function(dataURL){
  result.src = dataURL;

  // now just to show that passing to a canvas doesn't hold the same results
  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 - not same data
  });

<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">

Answer 4

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

function toDataURL(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

Answer 5

刀 / 垫片 / 假手术

如果您的图像已经加载（或未加载），这个“工具”可能会派上用场：

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-type或者quality- 您可以省略这些参数/参数，如MDN规范中所述。

如果你加载了这个 JS（在需要它之前），那么转换为dataURL就像这样简单：

例子

HTML

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

JS

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

GPU 指纹识别

如果您担心这些位的“精确性”，那么您可以更改此工具以满足您的需求，如 @Kaiido 的答案所提供。

Answer 6

现在是 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">