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

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插件来获取坐标，我找到了

x:146
y:214
width:70
height:20
我在这里使用过。

context.drawImage(img, 146, 214);
 ...
data = context.getImageData(146, 214, 70, 20);
因此该区域的平均颜色应为绿色，但我正在获取天空的颜色。 

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

Answer 1

我在jsfiddle上写了一个示例：http://jsfiddle.net/w86mu4bz