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 somethi

Answer 1

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 2

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 3

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 4

• 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 5

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)