Skip to main content
C
coty_hsu
Inspiring
May 4, 2017
Answered

getImageData in Animate CC

  • May 4, 2017
  • 2 replies
  • 1136 views

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

This topic has been closed for replies.
Correct answer coty_hsu

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

}

2 replies

C
coty_hsuAuthorCorrect answer
Inspiring
May 4, 2017

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

}

C
ClayUUID
Legend
May 4, 2017

Well for one thing you're adding your onload handler after you start the download. That's a race condition.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices