HTML5画布中的跨源数据

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(跨源资源共享),请使用图像响应传递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';

希望这可以帮助