Retornar cor predominante de uma imagem com JavaScript

16d atrás

A função abaixo, escrita em #JavaScript, retorna a cor que mais aparece em uma imagem.

Vamos dividir a função em várias partes, e explicar cada uma delas, no final você terá o código completo. Inicie adicionando o corpo da função getAvgColor, nessa primeira parte estamos instanciando uma imagem, e esperando o seu carregamento.

function getAvgColor(src) {
	return new Promise(resolve => {
		const image = new Image();

		image.src = src;
		image.crossOrigin = 'Anonymous';
		image.onload = () => {
			// Os próximos códigos vêm aqui
		}
	});
}

Essa segunda parte vem dentro do onload da imagem. Aqui simplesmente estamos criando um canvas do tamanho da imagem e desenhando a imagem nele.

const
	canvas = document.createElement('canvas'),
	context = canvas.getContext('2d');

	canvas.width = image.width;
	canvas.height = image.height;
	context.drawImage(image, 0, 0);

Em seguida, vamos pegar os dados de cores imagem, e salvá-los em um objeto de chave => valor, contendo a cor rgb como chave e a quantidade de ocorrências como valor.

const data = context.getImageData(0, 0, image.width, image.height).data;
const colors = {};

for (let i = 0; i < data.length; i += 4) {
	const r = data[i];
	const g = data[i + 1];
	const b = data[i + 2];
	const a = data[i + 3];

	if (a > 0) {
		const color = `${r},${g},${b}`;
		colors[color] = (colors[color] || 0) + 1;
	}
}

A última parte é percorrer esse objeto, e pegar a cor com maior número de ocorrências, retornando ela no formato RGB:

let
	avg = null,
	max = 0;

for (const c in colors) {
	if (colors[c] > max) {
		avg = c;
		max = colors[c];
	}
}

resolve(avg ? `rgb(${avg})` : null);

E aqui está como utilizar a função:

getAvgColor('https://insights.ionited.io/banner.png')
.then(rgb => console.log(rgb)); // rgb(255,236,179)

Código completo e exemplo de uso:

Comentários (0)