Question

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

Answer 1

为图像启用CORS（Cross-Origin Resource Sharing），通过带有图像响应的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: *，则可以从客户端修复它：向图像或视频添加属性。

＆＃13;

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

＆＃13;

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

HTML5画布中的跨源数据

5 个答案: