Question

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

This is the image

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

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

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

1 个答案: