Javascript将图像转换为文件返回零

我有来自其他服务器的img

<img src="https://cloudserver/1.jpg">

单击此img，我希望转换为文件对象，以便向服务器发送post请求。 在这个函数之后，我看到data all bytes=0，不明白发生了什么？在搜索中，我发现需要等待的问题，然后图像加载完成，但我100%已经加载图像

imgToFile: function (imageElement){
    imageElement.crossOrigin="anonymous";

    var canvasElement = document.createElement("canvas");
    canvasElement.width = imageElement.width;
    canvasElement.height = imageElement.height;
    var canvasContext = canvasElement.getContext("2d");
    canvasContext.drawImage(imageElement, 0, 0);

    var imageData = canvasContext.getImageData(0, 0, imageElement.width, imageElement.height).data;
    var buffer = new Uint8Array(imageData.length);
    for(var index = 0; index < imageData.length; index++)
        buffer[index] = imageData[index];

    var imageBlob = new Blob(buffer);
    return new File([imageBlob], /\/([^/]+)$/.exec(imageElement.src)[1]);
}

imgToFile:函数（imageElement）{
imageElement.crossOrigin=“匿名”；
var canvasElement=document.createElement（“canvas”）；
canvasElement.width=imageElement.width；
canvasElement.height=imageElement.height；
var canvasContext=canvascelement.getContext（“2d”）；
drawImage（imageElement，0,0）；
var imageData=canvasContext.getImageData（0，0，imageElement.width，imageElement.height）；
var buffer=新的Uint8Array（imageData.length）；
对于（var index=0；index

沙箱：

---

这让我感到非常惊讶，我以为我知道这部分规范，但事实证明，更改

crossorigin

属性状态是 img的，这将迫使一个

Chrome只赶上了规格（M84），Firefox仍然没有，因此将抛出一个错误，抱怨图像确实污染了画布

另一方面，当您更改

crossOrigin

IDL属性时，Chrome将立即重新蚀刻图像，这次使用正确的CORS头。因此，当您在该浏览器中点击

drawImage

时，它仍然无法获取符合CORS的资源（即使它是同一个文件，因为它具有不同的头，浏览器将完全重新获取它）

因此，与您的想法相反，您的图像仍然没有加载到Chrome中

要解决这个问题，您可以在js脚本中添加一个

onload

事件处理程序，但您还需要通过再次设置

src

属性（甚至设置为相同的值），强制其他浏览器重新蚀刻图像：

onload=（evt）=>{
const img=document.querySelector（'img'）；
img.onload=（evt）=>{
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.drawImage（img，0,0）；
日志（…ctx.getImageData（250120,1,1）.data）；
};
img.crossOrigin='匿名'；
img.src=img.src；//对非Chrome浏览器强制重新蚀刻
};
img{宽度：300px}
请分享一个工作示例，说明如何调用所有方法。奇怪的是，如果你有零，你应该只有一个错误，因为设置
crossOrigin
不会使图像重新蚀刻资源，这意味着你应该通过绘制此图像污染画布，并且在
getImageData
之后，你永远不会到达任何地方。嗨，我添加了sandboxwow！它非常核心的知识：）我尝试使用第二个变种，现在所有的工作没有双重下载。谢谢！P.S.有趣的是，为什么我没有在chrome网络标签中观看第二次下载？关于P.S.最后的评论我想出来了：）