Wie berechnet man die durchschnittliche Farbe eines Bildes mit JavaScript?

Durchschnittliche Bildfarbe in JavaScript ermitteln

Problem:

Ist es möglich, die Farbe zu bestimmen? die durchschnittliche Farbe eines Bildes mithilfe von JavaScript?

Lösung:

Auch wenn dies möglicherweise nicht sofort ersichtlich ist, können Sie tatsächlich die durchschnittliche Farbe eines Bildes mithilfe von JavaScript berechnen. Der Schlüssel dazu liegt in der Nutzung der HTML5-Funktion Element.

Um die durchschnittliche Farbe aus einem Bild zu extrahieren, führen Sie die folgenden Schritte aus:

1. Erstellen Sie eine Element und rufen Sie seinen 2D-Kontext ab.
2. Zeichnen Sie das Bild mit der Methode drawImage() auf die Leinwand.
3. Verwenden Sie getImageData(), um die Pixeldaten von der Leinwand abzurufen.
4. Durchlaufen Sie jedes Pixel und akkumulieren Sie die Rot-, Grün- und Blauwerte in separaten Variablen.
5. Dividieren Sie die akkumulierten Werte durch die Gesamtzahl der Pixel, um die durchschnittliche Farbe zu erhalten.

Hier ist eine Beispielfunktion, die den beschriebenen Algorithmus implementiert:

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

Diese Funktion verwendet ein Bildelement als Eingabe und gibt ein Objekt zurück, das die durchschnittlichen Rot-, Grün- und Blauwerte als Ganzzahlen enthält.

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