Convert image to RGB array in Javascript

Question

Is it possible to get an array of pixels from a PNG or BMP image in Javascript? I would like to get an RGB array from an image so that I can manipulate an array of pixels and then draw the resized image onto the canvas.

UPDATE: I found an exact duplicate here: how to get the RGB value of an image on a page using javascript? p>

However, the answers do not contain detailed information on how to really solve this problem.

Answer 1

There are hundreds of tutorials on the web about using HTML Canvas imageData , which receives canvas RGBA values. Search the canvas canvas image and you will find a lot of information.

All you have to do is:

ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(x, y, width, height).data; 

imgData is now an array where every 4 places are pixels. So, [0][1][2][3] is the [r][g][b][a] first pixel.