javascript - Get average outer pixel color of image

Question

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.

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.

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

Answer 1

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.

Demo

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>