Javascript 如何解决；画布已被跨来源数据污染。”；当我尝试使用getImageData时

我曾尝试在我的函数中实现一个反转颜色函数，但我不知道如何解决交叉原点的问题

我曾尝试使用“匿名”，但这也不起作用。所以问题很简单。如何正确使用此getImageData

    var canvasOriginal = document.getElementById("imagemOriginal");
    var ctxOriginal = canvasOriginal.getContext("2d");

    var imgOriginal = new Image();
    var imgOut = new Image();

    imgOriginal.src = 'images-png/img1.png';

    imgOriginal.onload = function (){

        ctxOriginal.drawImage(imgOriginal,0,0,512,512);

        imgOut = ctxOriginal.getImageData(0,0,512,512);

        for (let i = 0; i < imgOut.data.length; i += 4) {
            imgOut.data[i] = 255 - imgOut.data[i];
            imgOut.data[i+1] = 255 - imgOut.data[i+1];
            imgOut.data[i+2] = 255- imgOut.data[i+2] ;
        }
        ctxOriginal.putImageData(imgOut, 512, 0);       
    };

var Canvasooriginal=document.getElementById（“imagemOriginal”）； var ctxOriginal=canvasooriginal.getContext（“2d”）； var imgOriginal=新图像（）； var imgOut=新图像（）； imgOriginal.src='imagespng/img1.png'； imgOriginal.onload=函数（）{ ctxOriginal.drawImage（原始图像，0,0512512）； imgOut=ctxOriginal.getImageData（0,0512512）； 对于（设i=0；i我认为错误是因为您的浏览器知道自己是本地主机（或您所在的服务器），而画布认为您的图像不是来自本地主机或该服务器。如果你在本地上传，你的图片应该是

<img src="blob:http://your-server-address-or-localhost/image-id-returned-from-upload">

或者，如果图像已经存在，它将是类似的：

<img src="http://your-server-address-or-localhost/images-png/img1.png">

我想你所拥有的是这样的：

<img src="/images-png/img1.png">

这就绊倒了画布

您的imgOriginal.src应该是：

imgOriginal.src='1〕http://localhost:3000/images-png/img1.png'

希望这有帮助
 是的，我创建了一个localhost，它已经工作了，但我必须在谷歌浏览器上添加一个名为“允许控制允许源代码”的扩展才能工作。谢谢
 该错误意味着浏览器认为图像源与代码源不同。
匿名
仅在图像服务器支持跨源请求时有效