Día 24: Obtener el color promedio de una imagen con HTML5 Canvas

A través del elemento Canvas de HTML5 y un poco de Javascript, es posible obtener el color promedio de una imagen.

Demo


Cómo obtener el valor

Para obtener el color promedio de una imagen, podremos realizar los siguientes pasos.

1. Crear una imagen, esta puede ser en cualquier formato o un Data URI.

var image = new Image();
image.src = "images/average_image.jpg";
image.onload = function() {
  average_color = getaverageColor(this);
}

2. Dibujar el objeto en un canvas de HTML5.

function getaverageColor(imagen) {
  canvas = document.createElement('canvas');
  ctx = canvas.getContext("2d");
  canvas.width = imagen.width;
  canvas.height = imagen.height;
  ctx.drawImage(imagen, 0, 0);
}

3. Recorrer cada pixel y obtener su valor RGB. Cada valor R, G y B se suman.

// function getaverageColor(imagen)
imageData = ctx.getImageData(0, 0, imagen.width, imagen.height);
data = imageData.data;
for(i = 0, n = data.length; i < n; i += 4) {
  ++count;
  r += data[i];
  g += data[i+1];
  b += data[i+2];
}

4. Dividir cada valor R, G y B entre la cantidad total de pixeles y redondeamos el resultado.

// function getaverageColor(imagen)
r = ~~(r/count);
g = ~~(g/count);
b = ~~(b/count);

5. Obtenemos valor promedio RGB de la imagen.

// function getaverageColor(imagen)
return [r, g, b];

Código del demo

El código del demo es el siguiente.

var averagediv = document.getElementById('averagecolor'), averageimage = document.getElementById('imagen');

function getaverageColor(imagen) {
  var r=0, g=0, b=0, count = 0, canvas, ctx, imageData, data, i;
  canvas = document.createElement('canvas');
  ctx = canvas.getContext("2d");
  canvas.width = imagen.width;
  canvas.height = imagen.height;
  ctx.drawImage(imagen, 0, 0);
  imageData = ctx.getImageData(0, 0, imagen.width, imagen.height);
  data = imageData.data;
  for(i = 0, n = data.length; i < n; i += 4) {
    ++count;
    r += data[i];
    g += data[i+1];
    b += data[i+2];
  }
  r = ~~(r/count);
  g = ~~(g/count);
  b = ~~(b/count);
  return [r, g, b];
}

function rgbToHex(arr) {
  return "#" + ((1 << 24) + (arr[0] << 16) + (arr[1] << 8) + arr[2]).toString(16).slice(1);
}

function uploadImage(e) {
  var image = new Image();
  image.src = e.target.result;
  image.onload = function() {
    switchImage(this);
  }
}
function switchImage(image) {
  var averagecolor = getaverageColor(image);
  var color = rgbToHex(averagecolor);
  averageimage.src = image.src;
  averagediv.style.backgroundColor = averagediv.textContent = color;
}

function setDefaultImage() {
  var image = new Image();
  image.src = "images/average_image.jpg";
  image.onload = function() {
    switchImage(this);
  }
}

document.getElementById("upload").addEventListener("change", function(e){
  file = e.target.files[0];
  if (!file.type.match(/image.*/)) return;
  var reader = new FileReader();
  reader.onload = uploadImage;
  reader.readAsDataURL(file);
});

setDefaultImage();

palabras / Compartir en: Facebook , Twitter o copiar enlace