javascript - Canvas - 无法获取图像数据

Question

我正在尝试获取在 JavaScript 中绘制到 Canvas 中的图像的图像数据，但下面的脚本在 ctx.getImageData() 处无提示地失败。控制台中没有显示错误消息。

var image = new Image();
image.src = "https://www.example.com/7/44/35.png"
image.width = 256;
image.heigth = 256;

var canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;

var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, 256, 256);

var imageData = ctx.getImageData(0, 0, 256, 256);
console.log(imageData) //this is never called, no error is displayed in console

我做错了什么？

编辑: 我不认为这是与 CORS 相关的问题，我在图像源的同一域上运行脚本，但仍然默默地失败

Answer 1

做了一些调整以使其正常工作:

• 使用image.crossOrigin = "anonymous"
• 使用 image.onload使用 drawImage() 之前等待图像加载的事件和ctx.getImageData() .

这是一个例子:

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "http://i.imgur.com/8B8ye29.jpg";
image.width = 400;
image.heigth = 400;

var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;

var ctx = canvas.getContext("2d");

image.onload = function() {
  ctx.drawImage(image, 0, 0, 400, 400);
  var imageData = ctx.getImageData(0, 0, 400, 400);
  console.log(imageData.height);
}