Comment puis-je calculer la couleur moyenne d’une image en utilisant JavaScript ?

Obtenir la couleur moyenne d'une image à l'aide de JavaScript

Déterminer la couleur moyenne d'une image est utile pour diverses applications, mais cela peut être particulièrement difficile pour accomplir cette tâche à l'aide de JavaScript.

Implémentation de JavaScript

Heureusement, grâce aux progrès du HTML5, les développeurs JavaScript peuvent tirer parti de l'outil élément pour extraire la couleur moyenne d’une image. Le script suivant montre comment cette technique peut être appliquée :

<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 &amp;&amp; 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>

Utilisation

Pour obtenir la couleur moyenne d'une image, appelez la fonction getAverageRGB en passant l'image élément comme argument. La fonction renvoie un objet avec les valeurs moyennes des composants rouge, vert et bleu.

Limitations

Cette technique est limitée aux images résidant sur le même domaine et est uniquement pris en charge par les navigateurs dotés de l'élément canevas HTML5. Pour les anciennes versions d'Internet Explorer, envisagez d'incorporer la bibliothèque excanvas pour activer des fonctionnalités partielles.

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!