Question

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.(…)

这是我正在使用chrome的控制台异常，但是它很奇怪，因为我没有抓取任何信息，文件或图像跨服务器，我正在使用的所有内容都在我的计算机上。我可能误解了这个错误的含义。

以下是代码

function draw(image,x,y,color = 0) {

context.drawImage(image,x,y);

if(color != 0) {
    var dat = context.getImageData(x,y,image.width,image.height);
    var map = dat.data;
    var len = map.length;
    if(color == "red") {
        for(i = 0;i < len;i += 4 ) {
            map[i + 0] += 50;
            map[i + 1] -= 50;
            map[i + 2] -= 50; 

        }
    }
    context.putImageDate(dat,x,y);
  }
}

图像从名为“images”的文件夹加载，该文件夹与我的.html文件位于同一目录中。对于如何解决这个问题，有任何的建议吗？谢谢！

Answer 1

如果您正在使用file://，则必须运行本地http服务器。

最简单的方法是在应用程序文件夹中运行python -m http.server（使用Python 3）。然后，您只需访问http://localhost:8000

即可

画布由于crossOrigin而受到污染，但图像在我的电脑上

1 个答案: