HTML5 canvas 中的跨域数据

Question

我正在用 js 加载图像并将其绘制到画布中。绘图后，我从画布中检索图像数据：

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的行为。

Answer 1

要为您的图像启用 CORS（跨源资源共享），请传递带有图像响应的 HTTP 标头：

Access-Control-Allow-Origin: *

来源由网页的域和协议（例如 http 和 https 不同）决定，而不是脚本的位置。

如果您使用 file:// 在本地运行，这通常总是被视为跨域问题；所以最好通过

http://localhost/

Answer 2

解决file://的跨域问题，可以用参数启动chrome

--allow-file-access-from-files

Answer 3

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

希望这有帮助

Answer 4

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

希望这有帮助。

Answer 5

如果服务器响应标头包含

Access-Control-Allow-Origin: *

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

<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>

否则你必须使用服务器端代理。

Answer 6

确保您是 serving 本地文件而不是浏览到它们。如果您使用的是 OSX，则您已经安装了 Python 服务器。只需

cd

在命令行中进入您网站的目录，运行

python -m SimpleHTTPServer

，然后在浏览器中转到

http://localhost:8000/

。

或者，您可以使用 Node.运行

npm install -g http-server

，然后

http-server

。这将在端口 8080 上提供您的索引页面，即浏览到

http://localhost:8080/

.