Javascript：如何从页面获取图像字节（无需重新下载）

Question

给定带有图像的现有浏览器页面，有没有办法<img>使用 Javascript 从元素中获取字节？我没有看到任何HTMLImageElement允许从图像元素中获取字节数组的方法。我尝试了以下方法，但这会返回一个空字节数组。var img = document.querySelector('.my_image');var body = document.querySelector('body');var canvas = document.createElement('canvas');canvas.height = img.height;canvas.width = img.width;var context = canvas.getContext('2d');context.drawImage(img, 0, 0);body.appendChild(canvas);var imageBytes = context.getImageData(img.width, img.height, 1, 1).data;console.log(imageBytes);

Answer 1

以下 js 代码将从现有<img..>元素中获取图像作为 base64而不重新下载图像（假设页面上有给定选择器的图像并且没有画布 cors 违规，当您单击时会出现这种情况下面的运行按钮）：

var canvas = document.createElement('canvas');

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

var img = document.querySelector('img');

canvas.height = img.naturalHeight;

canvas.width = img.naturalWidth;

context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

var base64String = canvas.toDataURL();

console.log(base64String);

<img src="http://placekitten.com/40/40">

注意：直接从代码段运行此代码将失败，并显示指示跨域冲突的错误消息。如果您将其复制到您自己的服务器，那么您将获得 base64 编码的内容（❗️不能是file:///URL）。如果您无法避免跨域问题，那么您将需要使用@DPardal 的解决方案。例如，如果您使用 selenium 之类的东西注入脚本，它也适用于第三方域。

Answer 2

有没有办法<img>使用 Javascript 从元素中获取字节？

不是真的，但你可以使用fetch()：

(async () {

  const arrayBuffer = await (await fetch("img-url")).arrayBuffer();

})();

这不应该重新下载图像，因为它仍然被缓存。

Answer 3

我在 StackOverflow 上找到了另一个具有相同意图的贡献。

如何仅使用 javascript 将图像转换为字节数组以将图像存储在 sql server 上？

这是相关代码：

var url;

var canvas = document.createElement("canvas");

var img1=document.createElement("img"); 

function getBase64Image(){     

    url = document.getElementById("fileUpload").value;

    img1.setAttribute('src', url); 

    canvas.width = img1.width; 

    canvas.height = img1.height; 

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

    ctx.drawImage(img1, 0, 0); 

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

    alert("from getbase64 function"+dataURL );    

    return dataURL;

}