画布-无法获取图像数据

Question

I am trying to get the image data of an image drawn into a canvas in javascript, but the script below fails silently at the ctx.getImageData() . No error message is displayed in console.

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

What am I doing wrong?

EDIT: I dont think it's a CORS related problem, I am running the script on the same domain of the image source and still failling silently

Answer 1

Made a few tweaks to get it working:

• Use image.crossOrigin = "anonymous"
• Use an image.onload event to wait for the image to load before using drawImage() and ctx.getImageData() .

Here's an example:

 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); }