为了账号安全,请及时绑定邮箱和手机立即绑定

HTML5 canvas中的跨域数据

/ 猿问

HTML5 canvas中的跨域数据

动漫人物 2019-10-10 14:31:55

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


查看完整描述

3 回答

?
慕仙森

要为您的图像启用CORS(跨域资源共享),请将HTTP标头与图像响应一起传递:


Access-Control-Allow-Origin: *

来源取决于网页的域和协议(例如,http和https不同),而不是脚本的位置。


如果您使用file://在本地运行,则通常将其视为跨域问题。所以最好通过


http://localhost/


查看完整回答
反对 回复 2019-10-10
?
12345678_0001

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

希望这可以帮助


查看完整回答
反对 回复 2019-10-10
?
慕斯王

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

希望这可以帮助。


查看完整回答
反对 回复 2019-10-10

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信