我正在用 js 加载图像并将其绘制到 Canvas 中。绘制后，我从 Canvas 中检索 imageData:
var img = new Image();
img.onload = function() {
canvas.drawImage(img, 0, 0);
originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails
}
img.src = 'picture.jpeg';
这在 Safari 和 Firefox 中都完美运行，但在 Chrome 中失败并显示以下消息:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
javascript 文件和图像位于同一目录中，所以我不明白 chorme 的行为。
最佳答案
要为您的图像启用 CORS ( Cross-Origin Resource Sharing )，请传递带有图像响应的 HTTP header :
Access-Control-Allow-Origin: *
来源由网页的域和协议(protocol)(例如 http 和 https 不同)决定，而不是由脚本的位置决定。
如果您使用 file://在本地运行，这通常总是被视为跨域问题；所以最好通过
http://localhost/
关于javascript - HTML5 Canvas 中的跨域数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9972049/