Question

100

Convert an image to an RGB array in Javascript

rated 0 times [ 106] [ 6] / answers: 1 / hits: 29758 / 12 Years ago, sun, may 6, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hailey

Add To Favorites

Follow

Total Points: 355

Total Questions: 91

Total Answers: 91

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

hailey questions

1 Custom tooltip React ChartJs

Sun, Jul 11, 21, 00:00, 3 Years ago

1 PeerJs close video call not firing close event

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Send file with form-data and axios

Fri, Jul 24, 20, 00:00, 4 Years ago

1 Why can TypeScript only Sometimes Index an Object by a String

Tue, Jan 28, 20, 00:00, 4 Years ago

1 ChartJS x-axis show only months of year

Fri, Aug 30, 19, 00:00, 5 Years ago

View All

answered 12 Years ago rashawn · Accepted Answer

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.