以下是一些符合文章內容的英文問答標題: * How to Calculate the Average Color of an Image Using JavaScript? * JavaScript: Getting the Average Color of an Image * Extracting the Dominant Color of an Image with JavaScript

如何在JavaScript 中獲取圖像的平均顏色

確定圖像的平均顏色是一個有用的功能，可用於各種應用程序，例如建立調色板或提取影像的整體色調。儘管有許多框架和程式庫可以輕鬆實現此功能，但本文將重點介紹如何使用原生 JavaScript 編寫腳本來計算圖像的平均顏色。

解決方法

由於瀏覽器的安全限制，直接存取影像像素資料是不可能的，除非影像載入到畫布中。因此，我們將使用 元素來執行此操作。

代碼

以下JavaScript 代碼使用 元素從圖像中獲取平均RGB 值：

<code class="javascript">function getAverageRGB(imgEl) {

    // 将图像加载到画布中
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
    canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    context.drawImage(imgEl, 0, 0);

    // 获取图像数据
    var data = context.getImageData(0, 0, canvas.width, canvas.height);

    // 初始化 RGB 和计数器
    var rgb = {r: 0, g: 0, b: 0};
    var count = 0;

    // 循环遍历像素数据
    for (var i = 0; i < data.data.length; i += 4) {
        // 累加 RGB 值
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
        count++;
    }

    // 计算平均 RGB 值
    rgb.r = Math.floor(rgb.r / count);
    rgb.g = Math.floor(rgb.g / count);
    rgb.b = Math.floor(rgb.b / count);

    return rgb;
}</code>

使用

要使用此程式碼，只需將要分析的圖像元素傳遞給getAverageRGB 函數即可。該函數將傳回一個對象，其中包含影像的平均 RGB 值。然後可以使用這些值在各種應用程式中產生顏色或提取影像的主色調。

以上是以下是一些符合文章內容的英文問答標題: * How to Calculate the Average Color of an Image Using JavaScript? * JavaScript: Getting the Average Color of an Image * Extracting the Dominant Color of an Image with JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！