Obtenir la couleur moyenne d'une image via Javascript

Question

Je ne suis pas sûr que ce soit possible, mais je cherche à écrire un script qui renverrait la moyenne. hex o rgb pour une image. Je sais que cela peut être fait en AS mais je cherche à le faire en JavaScript.

Answer 1

C'est la réponse de @350D mais en asynchrone (car certaines images peuvent prendre du temps à charger) et en script.

async function get_average_rgb(src: string): Promise<Uint8ClampedArray> {
/* https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript */
    return new Promise(resolve => {
        let context = document.createElement('canvas').getContext('2d');
        context!.imageSmoothingEnabled = true;

        let img = new Image;
        img.src = src;
        img.crossOrigin = "";

        img.onload = () => {
            context!.drawImage(img, 0, 0, 1, 1);
            resolve(context!.getImageData(0, 0, 1, 1).data.slice(0,3));
        };
    });
}

Answer 2

Il s'agit de la "quantification de la couleur" qui a plusieurs approches, notamment MMCQ (Quantification par découpage médian modifié) ou OQ (Quantification par Octree). Les différentes approches utilisent K-Means pour obtenir des groupes de couleurs.

J'ai rassemblé tout cela ici, car je cherchais une solution pour tvOS où il y a un sous-ensemble de XHTML, qui n'a aucune <canvas/> élément :

Générer les couleurs dominantes d'une image RVB avec XMLHttpRequest

Answer 3

Comme indiqué dans d'autres réponses, souvent, ce que vous voulez vraiment, c'est la couleur dominante, par opposition à la couleur moyenne qui tend à être le brun. J'ai écrit un script qui obtient la couleur la plus commune et je l'ai posté sur ce lien Gist

Answer 4

Il existe un outil en ligne pickimagecolor.com qui vous aide à trouver la couleur moyenne ou dominante d'une image. il vous suffit de télécharger une image depuis votre ordinateur et de cliquer sur l'image. Il donne la couleur moyenne en HEX, RGB et HSV. Il trouve également les nuances de couleur correspondant à cette couleur à choisir. Je l'ai utilisé plusieurs fois.