Extracting RGB channel from an image

Question

Is it possible to extract the colors from an image of any type using javascript? i want the percentage of each color in the image as well.

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

Yes this is possible. You need to load the image on a canvas. Then you can extract the color on each arbitrary x,y coordinate.

You might want to have a look at

edited May 23 '17 at 12:19

Community

1
1

answered Dec 17 '13 at 06:56

Bas van Dijk

8,857
9
53
83

score 1 · Accepted Answer · edited May 23 '17 at 12:28

To get the base 64 encoded image data,

function getBase64FromImage(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    return canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
}

You'll probably want to have a library process the image data, rather than doing it yourself:

What is the best JavaScript image processing library?

Extracting RGB channel from an image

2 Answers2