Copy link to clipboard
Copied
Hi all,
I'm trying to use getImageData to detect the alpha value of pixels but I couldn't do it correctly, wondering if anyone knows how to do that?
Here's the code I wrote, can't get any image data.
var ctx = canvas.getContext('2d');
var bmp1 = new createjs.Bitmap('http://lorempixel.com/400/200/sports/Dummy-Text/')
bmp1.image.onload = function()
{
stage.addChild(bmp1);
//ctx.drawImage(bmp1, 0, 0, 400, 200); //this line cause error
var imageData = ctx.getImageData(0, 0, 400, 200);
console.log(imageData.data[3]);
}
Thanks in advance,
Chih Wei
I was able to fix the issue
var image;
var bitamp;
var ctx = canvas.getContext('2d');
image = new Image();
image.onload = handleComplete;
image.src = '';
image.crossOrigin = "Anonymous";
function handleComplete()
{
bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
ctx.drawImage(bitmap.image, 0, 0, 960, 500);
var imageData = ctx.getImageData(0, 0, 960, 500);
console.log(imageData.data);
}
Copy link to clipboard
Copied
Well for one thing you're adding your onload handler after you start the download. That's a race condition.
Copy link to clipboard
Copied
I was able to fix the issue
var image;
var bitamp;
var ctx = canvas.getContext('2d');
image = new Image();
image.onload = handleComplete;
image.src = '';
image.crossOrigin = "Anonymous";
function handleComplete()
{
bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
ctx.drawImage(bitmap.image, 0, 0, 960, 500);
var imageData = ctx.getImageData(0, 0, 960, 500);
console.log(imageData.data);
}