获取图像的平均外部像素颜色 [英] Get average outer pixel color of image

问题描述

所以我想获得图像中外部像素的平均颜色，以给出图像显示的div的背景，颜色相同。因此，我不必自己制作所有图像背景颜色。

So I want to get the average color of the outer pixels in an image, to give the background of the div the image is shown in, the same color. So I won't have to make all images the background color myself.

示例：如果图像 100px x 100px ，检查图像顶部的5个外部像素，图像右侧的5个外部像素，左侧和底部相同。您将获得5 x 100 x 4像素，获取颜色，检查平均值并让JS给div提供相同的背景。

Example: if the image is 100px x 100px, you check the 5 outer pixels at the top of the image, 5 outer pixels of the right side of the image, same for left and bottom. You will get 5 x 100 x 4 pixels, get the colors, check the average and let JS give the div the same background.

因此，如果平均颜色＃000000 ，div BG将为＃000000 。如果平均值 #FAFAFA ，则div BG将为 #FAFAFA

So if the average color is #000000, the div BG will be #000000. If average is #FAFAFA, the div BG will be #FAFAFA

推荐答案

你必须使用画布。这将要求履行CORS限制。

You have to use canvas for this. This will require CORS restrictions to be fulfilled though.

如果只是从要分析的区域中提取像素，则加上并除以数字您计算的像素数。

If it is it's just a matter of extracting the pixels from the region you want to analyse, add up and divide on number of pixels you counted.

var img = new Image();                            // load an image
img.crossOrigin = "";                             // we need CORS here...
img.onload = function() {                         // when image has loaded:
  var div = document.querySelector("div");
  div.appendChild(this);                          // add image to DOM (demo) 
  div.style.background = analyse(img, 5);         // bg color = result from analyse
}
img.src = "http://i.imgur.com/rUeQDjE.png";       // some image (CORS enabled)

function analyse(img, border) {
  var canvas = document.createElement("canvas"),  // create a canvas element
      ctx = canvas.getContext("2d"),              // get context
      w = img.naturalWidth,                       // get actual width..
      h = img.naturalHeight;
  
  canvas.width = w;                               // set canvas size
  canvas.height = h;
  
  ctx.drawImage(img, 0, 0);                       // draw in image
  
  // do checks:, for example:
  //if (border*2 > canvas.width || border*2 > canvas.height) throw "Image too small!";
  
  // get borders, avoid overlaps (though it does not really matter in this case):
  var top = ctx.getImageData(0, 0, w, border).data;
  var left = ctx.getImageData(0, border, border, h - border*2).data;
  var right = ctx.getImageData(w - border, border, border, h - border*2).data;
  var bottom = ctx.getImageData(0, h - border, w, border).data;
  
  var r = 0, g = 0, b = 0, cnt = 0;
  
  // count pixels and add up color components: (see function below)
  countBuffer(top);
  countBuffer(left);
  countBuffer(right);
  countBuffer(bottom);
  
  // calc average
  r = (r / cnt + 0.5)|0;
  g = (g / cnt + 0.5)|0;
  b = (b / cnt + 0.5)|0;
  
  return "rgb(" + r + "," + g + "," + b + ")";
  
  function countBuffer(data) {
    var i = 0, len = data.length;
    while(i < len) {
        r += data[i++];   // add red component etc.
        g += data[i++];
        b += data[i++];
        i++;
        cnt++;            // count one pixel
    }
  }
  
}

div {padding:30px}

<div></div>

这篇关于获取图像的平均外部像素颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！