• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

getImageData in Animate CC

Explorer ,
May 04, 2017 May 04, 2017

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

Views

916

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , May 04, 2017 May 04, 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);

}

Votes

Translate

Translate
LEGEND ,
May 04, 2017 May 04, 2017

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 04, 2017 May 04, 2017

Copy link to clipboard

Copied

LATEST

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

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines