jquery - 计算特定区域的平均图像颜色

Question

我已经发布了一个问题，但我无法正确解释它(setting font color by taking image average color)并且 stackoverflow 不允许我上传多个链接，所以我会尝试再次解释这个问题。请原谅我，如果我犯了任何错误，我是新来的，实际上我想去掉图像上特定区域的平均颜色。我见过很多计算整幅图像的平均颜色的例子。

This is the image

我有两个文本框。 textbox1 颜色将基于其背景颜色的平均值(云颜色平均值)而不是整个图像的平均值。同样，底部颜色的 textbox2 应该是其背景颜色平均值(高速公路颜色)的平均值。

Answer 1

谢谢我得到了答案。感谢@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'));