Convert An Image To An Rgb Array In Javascript

Is it possible to get an array of pixels from a PNG or BMP image in Javascript? I'd like to obtain an RGB array from an image so that I can manipulate the array of pixels, and then

Solution 1:

There are a hundred tutorials on the net about using HTML Canvas imageData, which gets the RGBA values of an canvas. Do a search for canvas imageData and you'll find plenty of info.

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 each pixel. So [0][1][2][3] are the [r][g][b][a] of the first pixel.