Рассчитать средний цвет изображения в определенном регионе

Question

Я разместил вопрос, но я не смог его правильно объяснить (setting font color by taking image average color), и stackoverflow не позволял загружать несколько ссылок, поэтому я попытаюсь снова объяснить вопрос , Простите меня, если я ошибаюсь, я новичок здесь, на самом деле хочу вытащить средний цвет конкретной области на изображении. Я видел много примеров расчета среднего цвета всего изображения.

This is the image

, где у меня есть два текстовых полей. цвет textbox1 будет основываться на среднем его цвете фона (средний цвет облака), а не на целом изображении. Точно так же текстовое поле2 в нижнем цвете должно быть средним по цвету только для фона (цвет шоссе).

Answer 1

Спасибо, что получил Answser. Спасибо @Cinn, который помог мне решить эту проблему. Пожалуйста, посетите ссылку JsFiddle, если кто-то хочет узнать средний цвет конкретного региона на изображении.

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