Comment obtenir la couleur moyenne ou principale d'une image avec javascript?

Tout d'abord, dessinez l'image sur un canvas :

 function draw(img) { var canvas = document.createElement("canvas"); var c = canvas.getContext('2d'); c.width = canvas.width = img.width; c.height = canvas.height = img.height; c.clearRect(0, 0, c.width, c.height); c.drawImage(img, 0, 0, img.width , img.height); return c; // returns the context } 

Vous pouvez maintenant itérer sur les pixels de l'image. Une approche naïve pour la détection des couleurs consiste à compter simplement la fréquence de chaque couleur dans l'image.

 // returns a map counting the frequency of each color // in the image on the canvas function getColors(c) { var col, colors = {}; var pixels, r, g, b, a; r = g = b = a = 0; pixels = c.getImageData(0, 0, c.width, c.height); for (var i = 0, data = pixels.data; i < data.length; i += 4) { r = data[i]; g = data[i + 1]; b = data[i + 2]; a = data[i + 3]; // alpha // skip pixels >50% transparent if (a < (255 / 2)) continue; col = rgbToHex(r, g, b); if (!colors[col]) colors[col] = 0; colors[col]++; } return colors; } function rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } 

getColors renvoie une carte de noms et de points de couleurs. Les pixels transparents sont ignorés. Il devrait être trivial d'obtenir la couleur la plus fréquemment vue de cette carte.

Si vous voulez littéralement une moyenne de chaque composant de couleur, vous pouvez facilement obtenir cela à partir des résultats de getColors , mais les résultats ne sont probablement pas très utiles. Cette réponse explique une approche beaucoup mieux.

Vous pouvez l'utiliser comme ceci:

 // nicely formats hex values function pad(hex) { return ("000000" + hex).slice(-6); } // see this example working in the fiddle below var info = document.getElementById("info"); var img = document.getElementById("squares"); var colors = getColors(draw(img)); for (var hex in colors) { info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex]; } 

Voir un exemple de travail .

• Mettez l'image sur un canevas.
• Obtenez un contexte 2D.
• Bouclez les pixels et enregistrez chaque valeur r, g, b. Si vous trouvez la même chose, incrémenter une fois.
• Bouclez les valeurs mémorisées r, g, b et prenez note de la plus grande valeur r, g, b.
• Convertir r, g, b à hex .

Ceci n'est possible qu'avec la balise de toile comme décrit ici:

http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Bien sûr, cela n'est disponible que dans les navigateurs les plus récents

Pour trouver cette couleur moyenne:

1. Mettez l'image sur toile
2. Redimensionner l'image à 1px par 1px
3. Obtenez la couleur du pixel résultant (Ce pixel sera la moyenne calculée)