给出错误图像的所选区域的图像的平均颜色

Question

我试图找到图像某些部分的平均颜色，然后将其设置为背景。我正在使用此颜色来查找所选区域的平均代码。

JSFiddle code to find average image color.

我想从图像中提取该部分并找到平均颜色，然后将其设置为背景图像

这是我正在使用的代码

<img id="i" src="bg_300x250_landscape.jpg"/>

<script type="text/javascript">
    var rgb = getAverageRGB(document.getElementById('i'));
    document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';

   function getAverageRGB(img) {
var canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
count = 0,
i = -4,
data, length;

// return the base colour for non-compliant browsers
if (!context) { return rgb; }



 context.drawImage(img, 146, 214);

try {
data = context.getImageData(146, 214, 70, 20);
} catch(e) {
// catch errors - usually due to cross domain security issues
alert(e);
return rgb;
}

data = data.data;
length = data.length;
while ((i += pixelInterval * 4) < length) {
count++;
rgb.r += data[i];
rgb.g += data[i+1];
rgb.b += data[i+2];
}
// floor the average values to give correct rgb values (ie: round number values)
rgb.r = Math.floor(rgb.r/count);
rgb.g = Math.floor(rgb.g/count);
rgb.b = Math.floor(rgb.b/count);

return rgb;
}


</script>

我使用了MeasureIT Firefox AddOn来获取坐标，我找到了

x:146
y:214
width:70
height:20

我在这里使用过。

context.drawImage(img, 146, 214);
 ...
data = context.getImageData(146, 214, 70, 20);

因此该区域的平均颜色应该是绿色，但我得到了天空的颜色。

Answer 1

我在jsfiddle上写了一个例子：http://jsfiddle.net/p8pzozxx/39/

这是代码： html：

<img src="http://publicdomainarchive.com/wp-content/uploads/2014/02/public-domain-images-free-high-resolution-quality-photos-unsplash-0079.jpg" title="Photo from publicdomainarchive.com" id="image" crossOrigin="anonymous"/>

<h1 id="h1">My amazing title</h1>

css：

img, h1 {
    margin : 0;
    padding : 0;
}
img {
    width : 500px;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
}
h1 {
    font-family : 'Open Sans', Arial;
    font-size : 2em;
    position : absolute;
    top : 20px;
    left : 0;
    color : white;
    z-index : 2;
    padding : 3px 5px 3px 25px; /* attention this causes a margin of error !! */
}

和javascript：

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

它使用canvas，所以不要忘记为不支持它的浏览器添加默认颜色（例如使用modernizr）