Convert an image to an RGB array in Javascript

Question

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 draw the modified image on a canvas.

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

However, the answers don't go into much detail about how to actually solve this problem.

If you click on the link of the answer to that question it takes you to a detailed answer of how to invert the color of each pixel in an image. It should be trivial to convert that code into storing an array of pixels. — JaredMcAteer
– JaredMcAteer, Commented May 6, 2012 at 19:30
possible duplicate of how to get the RGB value of an image in a page using javascript? — John Carter
– John Carter, Commented May 7, 2012 at 1:13

Simon Sarris · Accepted Answer · 2012-05-07 01:06:55Z

22

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.

answered May 7, 2012 at 1:06

Simon Sarris

64.3k13 gold badges150 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anderson Green Over a year ago

What should the parameter type of "img" be? Should it be an image object, or should it be the image URL as a string?

Mustafa Over a year ago

@AndersonGreen an instance of Image object, you can get it via either DOM, make a new one by: var img = new Image(); img.src = "http://..." or img.src = "data:image/jpeg;base64,...."

loretoparisi Over a year ago

I do not have <canvas/>, since I'm running a subset of XHTML, but I have <img/> How can I do that?

1.21 gigawatts Over a year ago

Would imgData be considered a byte array?

Fappaz Over a year ago

Just a note that I had to initialise the width and height for both the image and the canvas to make it work: let image = new Image(800,600); [canvas.width, canvas.height] = [img.width, img.height];

Collectives™ on Stack Overflow

Convert an image to an RGB array in Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related