如何使用 JavaScript 計算圖像的平均顏色？

在JavaScript 中取得影像的平均顏色

問題：

問題：

是否可以確定使用JavaScript 計算影像的平均顏色？

解決方案：

雖然可能不是很明顯，但您確實可以使用 JavaScript 計算圖像的平均顏色。實現這一點的關鍵是透過使用 HTML5 來實現。
1. 要從影像中擷取平均顏色，請依照下列步驟操作：
3. 建立一個 元素。元素並檢索其 2D 上下文。
4. 使用 drawImage() 方法在畫布上繪製影像。
5. 使用 getImageData() 從畫布擷取像素資料。

迭代每個像素並在單獨的變數中累積紅色、綠色和藍色值。

將累積值除以像素總數以獲得平均顏色。

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

以下是實現所描述演算法的範例函數：此函數將影像元素作為輸入，並傳回一個包含平均紅色、綠色和藍色值作為整數的對象。

以上是如何使用 JavaScript 計算圖像的平均顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！