Javascript HTML5画布中的跨源数据

我正在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

---

希望这有帮助。

如果服务器响应头包含

访问控制允许来源：

，则可以从客户端修复它：向图像或视频添加属性

如果这不是来自web服务器，则可能会重复此问题。看起来您是对的，解决了问题。谢谢而且…如果你想做跨原点

的事情，请使用

.crossOrigin

。实际上这不应该是一个跨源问题，因为js和image文件位于同一个目录中。设置交叉原点标志不起作用。我只想在我的浏览器中本地运行，但chrome认为这是一个跨源资源共享策略问题……没错，使用file://被视为一个跨域问题。相同的代码使用file://显示此错误，而使用http://则可以正常工作。谢谢，谢谢马库斯！这个解决方案对我来说要快得多。稍微解释一下，你需要先退出chrome，如果你在Mac上运行，打开终端并运行

open/Applications/Google\Chrome.app--args--允许从文件访问文件
命令
http://profile.ak.fbcdn.net/crossdomain.xml
不是的有效值，并且
跨域。xml
文件是Adobe Flash使用的，而不是CORS。
--allow-file-access-from-files

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';