Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dominant Color
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 = 0xFFFFFF;
// 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] << 16) | (data[i+1] << 8) | data[i+2];
if (color == 0xFFFFFF)
continue;
colorCount[color] = (colorCount[color] || 0)+1;
// keep track of the color that appears the most times
if (colorCount[color] > maxCount) {
maxCount = colorCount[color];
dominantColor = color;
}
}
return dominantColor.toString(16);
}
@gavinsharp

This comment has been minimized.

Copy link
Owner Author

commented Jun 9, 2011

(untested, for the moment!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.