HTML5 - Sampling color from hidden image/video

[rymbrant]

I have a setup of two images, one in front of the other. When the user clicks on the front image I want to sample the same pixel in the background image.

In Actionscript 3 i used the bitmapData class to do this.

In the HTML5 document I can get the pixel color of the entire canvas but only the visible pixels. Is there a way to sample the image in the background that is not visible on the canvas? Maybe create a second context for the other image? Preferably without flipping images.

[kglad · Accepted solution]

yes, javascript - How to get a pixel's x,y coordinate color from an image? - Stack Overflow

[rymbrant]

"Document" does not exist in Adobe Animate CC.  Is there a way to reference it?

[kglad]

document

[rymbrant]

Super sorry, it autocapitalized for some reason.  I was having difficulty as document was returning null until i realized i happened to have generated some poorly thought out variables further up.  Thanks very much.

[kglad]

you're welcome.

[rymbrant]

Oh if you don't mind, is the getElementById only for retrieving something from the server?  I can't seem to load an image from the library this way and using lib.ImageName  does not produce a format usable in getImageData.

[ClayUUID]

rymbrant  wrote

Oh if you don't mind, is the getElementById only for retrieving something from the server?

Eh? getElementById() isn't ever for that. It's used for retrieving references to elements in the currently loaded HTML document that have been assigned ID attributes... and it doesn't have anything to do with Animate Canvas programming.

To do what you want in a Canvas document, you have to assign your bitmap a linkage name in the library (double-click next to it in the Linkage column), load into a secondary offscreen canvas, then use getImageData() on it. Like this:

// setup

var myBitmap = new lib.myImage;

var bounds = myBitmap.getBounds();

myBitmap.cache(0, 0, bounds.width, bounds.height);

window.myBitmapContext = myBitmap.cacheCanvas.getContext("2d");

// usage (x, y, width, height; returns r, g, b array)

myBitmapContext.getImageData(0, 0, 1, 1).data;

I stored the bitmap context to a global (window) variable so you can access it from anywhere without having to worry about scope.

[rymbrant]

Oh thank you so much.  So much info online is crazy out of date and i was missing a couple of very basic bits of info that you have supplied.  Now many things make sense.