Calculate Average Image color of a specific region

Question

I have posted a question but i was not able to explain it properly(setting font color by taking image average color) and stackoverflow did not allow me to upload more than one links, so i will try to explain the question again. Pardon me if i make any mistake i am new here actually i want to take out the average color of specific region on the image. I have seen many examples calculating the average color of the whole image.

This is the image

where i have two textboxes. the textbox1 color will be based on the average of its background color(cloud color average) only not the whole image average. Similarly the textbox2 at the bottom color should be the average of its backgrounds color average only(the highway color).

How are you adding the text to the image? With Canvas? Will the image have the text on it before you calculate the average? — lemieuxster, Jan 30 '15 at 06:10
i can use canvas but what is the efficient solution @lemieuxster — user3754676, Jan 30 '15 at 06:26
I guess I am asking how you are adding the text to the images. Your examples only show an image - will it be an image or will it be an image with html elements on top of it? — lemieuxster, Jan 30 '15 at 06:33
[This plugin](http://www.kennethcachia.com/background-check/) analyze average color of an image behind a given DIV, and then apply a specific css class depending by a set threshold of luminonisity of average color. Probably it's not exactly what you want, but accomplish in indirect way, what you're lookin for. — Luca Detomi, Jan 30 '15 at 10:05

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

Thanks i got the Answser. Thanks to @Cinn who helped me out to solve this. Please visit the JsFiddle link if anyone want to find out the average color of specific region in the image.

var average_color_background = function(image, title) {
    var treat_properties = function(elmt_propertie) {
        return parseInt(elmt_propertie.replace(/px/, ''));
    }
    var image_width = treat_properties(getComputedStyle(image, null).width),
        image_height = treat_properties(getComputedStyle(image, null).height),
        title_width = treat_properties(getComputedStyle(title, null).width),
        title_height = treat_properties(getComputedStyle(title, null).height),
        title_top = treat_properties(getComputedStyle(title, null).top),
        title_left = treat_properties(getComputedStyle(title, null).left);

    var c = document.createElement('canvas');
        c.width = image_width;
        c.height = image_height;
        c.style.position = "absolute";
        c.style.top = 0;
        c.style.left = 0;
        c.style.zIndex = 0; // invisible calculation

    document.getElementsByTagName('body')[0].appendChild(c);

    var ctx = c.getContext("2d");

    var image_bis = new Image();
    image_bis.crossOrigin = 'anonymous'; // avoid security error

    image_bis.onload = function(){
        ctx.drawImage(image_bis,0,0,image_width,image_height);
        var imageData = ctx.getImageData(title_left, title_top, title_width, title_height),
            mapPixel = imageData.data;

        var red = 0,
            green = 0,
            blue = 0,
            length = 4 * title_width * title_height;
        for(var i=0;i<length;i+=4) {
            red += mapPixel[i];
            green += mapPixel[i+1];
            blue += mapPixel[i+2];
        }
        length = length / 4;
        red = Math.round(red/length);
        green = Math.round(green/length);
        blue = Math.round(blue/length);

        // display result, can easily be improved for something more beautiful (e.g. using complementary color) :
        title.style.backgroundColor = 'rgb('+red+','+green+','+blue+')';

        c.parentNode.removeChild(c);
        return true;        
    }
    image_bis.src = image.src;
}
average_color_background(document.getElementById('image'),document.getElementById('h1'));

Calculate Average Image color of a specific region

1 Answers1