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

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

JSFiddle代码查找平均图像颜色。

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

这是我正在使用的代码

  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; }  

我已经使用了MeasureIT Firefox AddOn来获取cordinates，我找到了

 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：

  
My amazing title 

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 

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