Return Pixels Of A Canvas Object?

Is there a function in javascript to return an array of pixels taken up by an image object in canvas? Is there anyway to return a list of pixels taken up by an image object in canv

Solution 1:

You can call ".getImageData()" on the context to get pixel values. You tell it the coordinates within the canvas to grab pixels from, and it gives you back an object with height, width, and pixels. The pixels are an array of integers, such that each pixel takes up 4 (red, green, blue, alpha). Thus there are height * width * 4 pixels in the array.

Here is the MDC page on the topic.

Solution 2:

Well, if you know the image object's position, it's possible to use the CanvasPixelArray:

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas