当我尝试使用getImageData时，如何解决“画布已被跨域数据污染”。

Question

我试图将反转颜色函数实现为我的函数，但是我没有如何使用Cross Origin解决这个问题。

我试图使用“匿名”，但这也行不通。 所以问题很简单。 如何正确使用此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);       
    };

Answer 1

是的，我创建了一个本地主机，并且可以使用，但是我必须在Google Chrome上添加一个名为“ Allow-Control-Allow-Origin”的扩展程序才能正常工作。 谢谢！

Answer 2

我认为该错误是因为您的浏览器知道自己为本地主机（或您所在的服务器），并且画布认为您的映像不是来自本地主机或该服务器。 如果您是在本地上传，则图片应类似于

<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 = 'http://localhost:3000/images-png/img1.png';

希望这可以帮助。