我正在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/
要解决文件：//的跨域问题，可以使用参数启动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>否则，您必须使用服务器端代理。
确保为本地文件提供服务，而不是浏览它们。如果你在OSX上，你已经安装了Python服务器。只需在命令行中将cd放入网站目录，运行python -m SimpleHTTPServer，然后在浏览器中转到http://localhost:8000/。
或者，也可以使用"节点"。运行npm install -g http-server，然后运行http-server。这将为8080端口上的索引页面提供服务，即浏览到http://localhost:8080/。