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

Question

给定一个带有图像的现有浏览器页面，有没有办法使用 Javascript 从元素中获取字节<img>？

我没有看到任何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

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

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

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

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

Answer 2

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

\n

\r\n

\r\n

var canvas = document.createElement(\'canvas\');\nvar context = canvas.getContext(\'2d\');\nvar img = document.querySelector(\'img\');\ncanvas.height = img.naturalHeight;\ncanvas.width = img.naturalWidth;\ncontext.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);\nvar base64String = canvas.toDataURL();\nconsole.log(base64String);

\r\n

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

\r\n

\r\n

\r\n

\n

\n

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

\n

\n