public
Last active

Dominant Color

  • Download Gist
dominant-color.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
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;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.