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

给定一个包含图像的现有浏览器页面，有没有办法使用Javascript从

元素获取字节

我没有看到任何允许从image元素获取字节数组的方法

我尝试了以下方法，但这会返回一个空字节数组

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'）；
drawImage（img，0,0）；
body.appendChild（画布）；
var imageBytes=context.getImageData（img.width，img.height，1,1）；
console.log（imageBytes）；

我在StackOverflow上发现了另一个具有相同意图的贡献

以下是相关代码：

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

有没有办法使用Javascript从

元素获取字节

不太可能，但您可以使用

fetch（）

：

（异步（）{
const arrayBuffer=await（await-fetch（“img-url”））.arrayBuffer（）；
})();

---

这不应该重新下载映像，因为它仍然处于缓存状态。

以下js代码将从现有的

获取映像。此解决方案正在重新下载映像。如果您将

p

重命名为

url

，那么代码的可读性会更高。谢谢，使用ES5JS可以实现这一点：

fetch（img.src）。然后（response=>response.arrayBuffer（））。然后（buf=>{console.log（buf）；}）