javascript - 当我尝试使用 getImageData 时如何解决 "The canvas has been tainted by cross-origin data."

Question

我尝试在我的函数中实现反转颜色函数，但我不知道如何使用跨源解决这个问题。

我尝试过使用“匿名”，但这也不起作用。所以问题很简单。如何正确使用这个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”的扩展才能工作。谢谢!