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

使用JavaScript 獲取圖像的平均顏色

確定圖像的平均顏色對於各種應用程式都很有價值，但它可能特別具有挑戰性

JavaScript 實現

幸運的是，隨著HTML5 的進步，JavaScript 開發人員可以利用 來完成此任務。元素提取影像的平均顏色。以下腳本示範如何應用此技術：

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

用法

要取得影像的平均顏色，請呼叫 getAverageRGB 函數，將影像元素傳遞為參數。此函數傳回一個具有紅色、綠色和藍色分量平均值的物件。

限制

此技術僅限於駐留在同一網域上的圖像，並且僅具有 HTML5 canvas 元素的瀏覽器支援。對於舊版的 Internet Explorer，請考慮合併 excanvas 程式庫以啟用部分功能。

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