function countPixelColor(source){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
img = new Image();
var vermelho = 0, laranja = 0, amarelo = 0, verde = 0,
verdeAzulado = 0, azul = 0, roxo = 0, rosa = 0,
branco = 0, cinzento = 0, preto = 0, castanho = 0;
img.onload = function(){
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var pixels = ctx.getImageData(0, 0, img.width, img.height);
console.log("Tamanho: " + pixels.data.length);
console.log("1º pixel --> R: " + pixels.data[0]+ " G: " + pixels.data[1] + " B: " + pixels.data[2]);
var r = 0, g = 0, b = 0;
// Margem de erro.
var me = 130;
// Verificar a cor dos pixeis com margem de erro definida em cima
for (var i = 0, n = pixels.data.length; i < n; i += 4) {
r = pixels.data[i+0]; // red
g = pixels.data[i+1]; // green
b = pixels.data[i+2]; // blue
// i + 3 é o canal alpha que não precisamos
// Verificar se o pixel é vermelho (valores --> RGB 204 0 0).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é vermelho
if(r > 204-me && r < 204+me && g> 0-me && g < 0+me && b> 0-me && b < 0+me && (Math.abs(204 - r) + Math.abs(0 - g) + Math.abs(0 - b)) < me)
vermelho++;
// Verificar se o pixel é laranja (valores --> RGB 251 148 11).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é laranja
else if(r > 251-me && r < 251+me && g> 148-me && g < 148+me && b> 11-me && b < 11+me && (Math.abs(251-r) + Math.abs(148-g) + Math.abs(11-b)) < me)
laranja++;
// Verificar se o pixel é amarelo (valores --> RGB 255 255 0).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é amarelo
else if(r > 255-me && r < 255+me && g> 255-me && g < 255+me && b> 0-me && b < 0+me && (Math.abs(255-r) + Math.abs(255-g) + Math.abs(0-b)) < me)
amarelo++;
// Verificar se o pixel é verde (valores --> RGB 0 204 0).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é verde
else if(r > 0-me && r < 0+me && g> 204-me && g < 204+me && b> 0-me && b < 0+me && (Math.abs(0-r) + Math.abs(204-g) + Math.abs(0-b)) < me)
verde++;
// Verificar se o pixel é verde-azulado (valores --> RGB 3 192 198).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é verde-azulado
else if(r > 3-me && r < 3+me && g> 192-me && g < 192+me && b> 198-me && b < 198+me && (Math.abs(3-r) + Math.abs(192-g) + Math.abs(198-b)) < me)
verdeAzulado++;
// Verificar se o pixel é azul (valores --> RGB 0 0 255).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é azul
else if(r > 0-me && r < 0+me && g> 0-me && g < 0+me && b> 255-me && b < 255+me && (Math.abs(0-r) + Math.abs(0-g) + Math.abs(255-b)) < me)
azul++;
// Verificar se o pixel é roxo (valores --> RGB 118 44 167).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é roxo
else if(r > 118-me && r < 118+me && g> 44-me && g < 44+me && b> 167-me && b < 167+me && (Math.abs(118-r) + Math.abs(44-g) + Math.abs(167-b)) < me)
roxo++;
// Verificar se o pixel é rosa (valores --> RGB 255 152 191).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é rosa
else if(r > 255-me && r < 255+me && g> 152-me && g < 152+me && b> 191-me && b < 191+me && (Math.abs(255-r) + Math.abs(152-g) + Math.abs(191-b)) < me)
rosa++;
// Verificar se o pixel é branco (valores --> RGB 255 255 255).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é branco
else if(r > 255-me && r < 255+me && g> 255-me && g < 255+me && b> 255-me && b < 255+me && (Math.abs(255-r) + Math.abs(255-g) + Math.abs(255-b)) < me)
branco++;
// Verificar se o pixel é cinzento (valores --> RGB 153 153 153).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é cinzento
else if(r > 153-me && r < 153+me && g> 153-me && g < 153+me && b> 153-me && b < 153+me && (Math.abs(153-r) + Math.abs(153-g) + Math.abs(153-b)) < me)
cinzento++;
// Verificar se o pixel é preto (valores --> RGB 0 0 0).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é preto
else if(r > 0-me && r < 0+me && g> 0-me && g < 0+me && b> 0-me && b < 0+me && (Math.abs(0-r) + Math.abs(0-g) + Math.abs(0-b)) < me)
preto++;
// Verificar se o pixel é castanho (valores --> RGB 136 84 24).
// Se o somatorio do erro dos bits for inferior a 43 quer dizer que é castanho
else if(r > 136-me && r < 136+me && g> 84-me && g < 84+me && b> 24-me && b < 24+me && (Math.abs(136-r) + Math.abs(84-g) + Math.abs(24-b)) < me)
castanho++;
}
// Estes log servem apenas para verificar a contagem dos pixeis de cada uma das cores na consola
console.log("vermelho: " + vermelho);
console.log("laranja: " + laranja);
console.log("amarelo: " + amarelo);
console.log("verde: " + verde);
console.log("verde-azulado: " + verdeAzulado);
console.log("azul: " + azul);
console.log("roxo: " + roxo);
console.log("rosa: " + rosa);
console.log("branco: " + branco);
console.log("cinzento: " + cinzento);
console.log("preto: " + preto);
console.log("castanho: " + castanho);
}
var cores=[vermelho,laranja,amarelo,verde,verdeAzulado,azul,roxo,rosa,branco,cinzento,preto,castanho];
img.src = source;
return cores;
}
var h= countPixelColor("Images/beach/img_3.jpg");
console.log("cores: " + h);