Comment calculer la couleur moyenne d'une image à l'aide de JavaScript ?

Obtenir la couleur moyenne de l'image en JavaScript

Problème :

Est-il possible de déterminer la couleur moyenne d'une image à l'aide de JavaScript ?

Solution :

Bien que cela ne soit pas immédiatement apparent, vous pouvez en effet calculer la couleur moyenne d'une image à l'aide de JavaScript. La clé pour y parvenir réside dans l'utilisation du format HTML5 élément.

Pour extraire la couleur moyenne d'une image, suivez ces étapes :

1. Créez un élément et récupérez son contexte 2D.
2. Dessinez l'image sur le canevas à l'aide de la méthode drawImage().
3. Utilisez getImageData() pour récupérer les données de pixels du canevas.
4. Parcourez chaque pixel et accumulez les valeurs rouge, vert et bleu dans des variables distinctes.
5. Divisez les valeurs accumulées par le nombre total de pixels pour obtenir la couleur moyenne.

Voici un exemple de fonction qui implémente l'algorithme décrit :

<code class="javascript">function getAverageRGB(imgEl) {
    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = { r: 0, g: 0, b: 0 },
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */
        return defaultRGB;
    }

    length = data.data.length;

    while ((i += blockSize * 4) < length) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r / count);
    rgb.g = ~~(rgb.g / count);
    rgb.b = ~~(rgb.b / count);

    return rgb;
}</code>

Cette fonction prend un élément d'image en entrée et renvoie un objet contenant les valeurs moyennes de rouge, de vert et de bleu sous forme d'entiers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!