How to get the average or main color from an image with javascript?

Question

what i want is to the the HEX or the RGB average value from an image to the another div background this color.

So if i upload an image with a ot of red i get something like #FF0000 just as an example.

Let Me know if this is posible :)

Many thanks.

Answer 1

First, draw the image on a canvas:

function draw(img) {
    var canvas = document.createElement("canvas");
    var c = canvas.getContext('2d');
    c.width = canvas.width = img.width;
    c.height = canvas.height = img.height;
    c.clearRect(0, 0, c.width, c.height);
    c.drawImage(img, 0, 0, img.width , img.height);
    return c; // returns the context
}

You can now iterate over the image's pixels. A naive approach for color-detection is to simply count the frequency of each color in the image.

// returns a map counting the frequency of each color
// in the image on the canvas
function getColors(c) {
    var col, colors = {};
    var pixels, r, g, b, a;
    r = g = b = a = 0;
    pixels = c.getImageData(0, 0, c.width, c.height);
    for (var i = 0, data = pixels.data; i < data.length; i += 4) {
        r = data[i];
        g = data[i + 1];
        b = data[i + 2];
        a = data[i + 3]; // alpha
        // skip pixels >50% transparent
        if (a < (255 / 2))
            continue; 
        col = rgbToHex(r, g, b);
        if (!colors[col])
            colors[col] = 0;
        colors[col]++;
    }
    return colors;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

getColors returns a map of color names and counts. Transparent pixels are skipped. It should be trivial to get the most-frequently seen color from this map.

If you literally want an average of each color component, you could easily get that from the results of getColors, too, but the results aren't likely to be very useful. This answer explains a much better approach.

You can use it all like this:

// nicely formats hex values
function pad(hex) {
    return ("000000" + hex).slice(-6);
}

// see this example working in the fiddle below
var info = document.getElementById("info");
var img = document.getElementById("squares");
var colors = getColors(draw(img));
for (var hex in colors) {
    info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex];
}

See a working example.

Answer 2

• Put image on canvas.
• Get 2D context.
• Loop through pixels, and store each r,g,b value. If you find the same, increment it once.
• Loop through stored r,g,b values and take note of largest r,g,b value.
• Convert r,g,b to hex.

Answer 3

This is only possible using the canvas tag as described here :

http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Of course this is only available in newer browsers

Answer 4

You might consider using the convolution filters css allows you to apply. This might be able to get the effect you're going for ( assuming you're wanting to present it back into the html). So you could display the image twice , one convolved.

That being said, doesn't really work if you need the information yourself for some purpose.

Answer 5

Update 2023: There is a javascript lib to do just that:
Color Thief - https://lokeshdhakar.com/projects/color-thief/

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Answer 6

For finding that average color:

1. Put Image on Canvas
2. Resize image to 1px by 1px
3. Get the color of the resulting pixel(This pixel will be the calculated average)