Wie kann ich mit JavaScript die durchschnittliche Farbe eines Bildes berechnen?

Durchschnittliche Farbe eines Bildes mit JavaScript ermitteln

Die Bestimmung der durchschnittlichen Farbe eines Bildes ist für verschiedene Anwendungen wertvoll, kann jedoch eine besondere Herausforderung darstellen um diese Aufgabe mit JavaScript zu erledigen.

JavaScript-Implementierung

Glücklicherweise können JavaScript-Entwickler mit den Fortschritten in HTML5 die Element, um die durchschnittliche Farbe eines Bildes zu extrahieren. Das folgende Skript zeigt, wie diese Technik angewendet werden kann:

<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>

Verwendung

Um die durchschnittliche Farbe eines Bildes zu erhalten, rufen Sie die Funktion getAverageRGB auf und übergeben Sie das Bild Element als Argument. Die Funktion gibt ein Objekt mit den Durchschnittswerten für Rot-, Grün- und Blauanteile zurück.

Einschränkungen

Diese Technik ist auf Bilder beschränkt, die sich in derselben Domäne befinden und ist Wird nur von Browsern unterstützt, die über das HTML5-Canvas-Element verfügen. Erwägen Sie für ältere Versionen von Internet Explorer die Integration der Excanvas-Bibliothek, um Teilfunktionen zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript die durchschnittliche Farbe eines Bildes berechnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!