CODEWITHSUNDEEP
jqueryhtmlcss
user3754676
user3754676

Reputation: 321

Calculate Average Image color of a specific region

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).

Upvotes: 3

Views: 378

Answers (1)

user3754676
user3754676

Reputation: 321

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'));

Upvotes: 1

Related Questions