Dominant Color

dominant-color.js

function getDominantColor(aImg) {
  let canvas = document.createElement("canvas");
  canvas.height = aImg.height;
  canvas.width = aImg.width;

  let context = canvas.getContext("2d");
  context.drawImage(aImg, 0, 0);

  // keep track of how many times a color appears in the image
  let colorCount = {};
  let maxCount = 0;
  let dominantColor = "";

  // data is an array of a series of 4 one-byte values representing the rgba values of each pixel
  let data = context.getImageData(0, 0, aImg.height, aImg.width).data;

  for (let i = 0; i < data.length; i += 4) {
    // ignore transparent pixels
    if (data[i+3] == 0)
      continue;

    let color = data[i] + "," + data[i+1] + "," + data[i+2];
    // ignore white
    if (color == "255,255,255")
      continue;

    colorCount[color] = colorCount[color] ?  colorCount[color] + 1 : 1;

    // keep track of the color that appears the most times
    if (colorCount[color] > maxCount) {
      maxCount = colorCount[color];
      dominantColor = color;
    }
  }

  let rgb = dominantColor.split(",");
  return rgb;
}