我正在 js 中加载图像并将其绘制到画布中。绘制后，我从画布中检索 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 中失败并显示以下消息：
无法从画布获取图像数据，因为画布已被跨域数据污染。
javascript文件和图像位于同一目录中，所以我不明白chorme的行为。
要为您的图像启用 CORS（跨源资源共享），请使用图像响应传递 HTTP 标头：
Access-Control-Allow-Origin: *
来源由网页的域和协议（例如 http 和 https 不相同）决定，而不是脚本的位置。
如果您使用 file:// 在本地运行，这通常总是被视为跨域问题；所以最好通过
http://localhost/
解决file://的跨域问题，可以用参数启动chrome
--allow-file-access-from-files
var img = new Image();
img.onload = function() {
canvas.drawImage(img, 0, 0);
originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail
}
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example
img.src = 'picture.jpeg';
希望这可以帮助
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
originalImageData = ctx.canvas.toDataURL();
}
img.src = 'picture.jpeg';
希望这可以帮助。
如果服务器响应头包含Access-Control-Allow-Origin: *，那么您可以从客户端修复它：向图像或视频添加属性。
<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>否则你必须使用服务器端代理。