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 () {&nbsp; 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");&nbsp;function getBase64Image(){&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; url = document.getElementById("fileUpload").value;&nbsp; &nbsp; img1.setAttribute('src', url);&nbsp;&nbsp; &nbsp; canvas.width = img1.width;&nbsp;&nbsp; &nbsp; canvas.height = img1.height;&nbsp;&nbsp; &nbsp; var ctx = canvas.getContext("2d");&nbsp;&nbsp; &nbsp; ctx.drawImage(img1, 0, 0);&nbsp;&nbsp; &nbsp; var dataURL = canvas.toDataURL("image/png");&nbsp; &nbsp; alert("from getbase64 function"+dataURL );&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return dataURL;}&nbsp;