HTML5 canvas中的跨域数据

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

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

希望这可以帮助。