给出错误图像的选定区域的图像的平均颜色 [英] Average color of an image of selected region giving wrong image

问题描述

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

下面是代码：
html：

 < img src =http://publicdomainarchive.com/wp-content/uploads/2014/02/public-domain- image-free-high-resolution-quality-photos-unsplash-0079.jpgtitle =来自publicdomainarchive.com的照片id =imagecrossOrigin =anonymous/> 
 
< h1 id =h1>我的惊人标题< / h1> 
  

css：

 code> 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; / *注意这导致错误的边缘！ * / 
} 
  

和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'; //避免安全错误
 
 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  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）; 
 
 //显示结果，可以很容易地改进更美观的东西（例如使用补色）：
 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'））; 
  

它使用画布，因此不要忘记为不支持的浏览器添加默认颜色（例如使用 modernizr ）

I am trying to find the average color of some part of the image and then setting it as a background. I am using this color to find the selected region average code.

JSFiddle code to find average image color.

I want to extract that part from the image and find the average color then set it to the background image

This is the code i am using

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

I have used MeasureIT Firefox AddOn to get the cordinates and i found

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

which i have used here.

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

So the average color of that region should be green but i am getting the color of the sky.

解决方案

I wrote an example on jsfiddle : http://jsfiddle.net/p8pzozxx/39/

Here is the code : 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 !! */
}

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

It uses canvas, so don't forget to add a default color for browsers that don't support it (using modernizr for example)

这篇关于给出错误图像的选定区域的图像的平均颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！