圖片顏色提取的核心方法包括：1.平均顏色法；2.中位數值法；3.k-means聚類法。平均顏色法通過計算所有像素rgb的平均值，實現簡單但易受極端值影響。中位數值法則對rgb通道分別排序并取中位數，能部分消除異常值影響。k-means聚類法則通過聚類算法將顏色分組，選取像素最多的簇中心作為主色，效果更好但需第三方庫支持且計算量大。此外，為提升性能可縮小圖片、抽樣像素、使用web workers和更高效顏色空間；處理透明像素時應忽略或結合透明度分析；如需多種顏色，可通過設置k-means的k值獲取多個代表色。
圖片顏色提取，簡單來說，就是用JS從一張圖片里找出最具代表性的顏色。這聽起來像個藝術問題，但實際上有很多實用的場景，比如根據圖片主題色調整網頁背景，或者用于圖像識別和分析。
解決方案
JS實現圖片顏色提取的核心在于：讀取圖片像素數據，然后對這些像素顏色進行統計分析。下面介紹三種常見的算法：
-
平均顏色法：這是最簡單粗暴的方法。讀取所有像素點的RGB值，分別求平均值，得到的就是平均顏色。
function getAverageColor(img) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, img.width, img.height).data; let r = 0, g = 0, b = 0; let pixelCount = 0; for (let i = 0; i < imageData.length; i += 4) { r += imageData[i]; g += imageData[i + 1]; b += imageData[i + 2]; pixelCount++; } r = Math.floor(r / pixelCount); g = Math.floor(g / pixelCount); b = Math.floor(b / pixelCount); return `rgb(${r}, ${g}, ${b})`; } // 使用示例 const imgElement = document.getElementById('myImage'); imgElement.onload = () => { const averageColor = getAverageColor(imgElement); console.log('平均顏色:', averageColor); };這種方法的優點是簡單快速，但缺點也很明顯，如果圖片中某種顏色占比很少，但RGB值很高，就會影響最終結果。
-
中位數值法：先統計所有像素的顏色值，然后找到RGB三個通道的中位數，組合成最終顏色。這種方法比平均值法稍微好一些，能過濾掉一些極端值的影響。
function getMedianColor(img) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, img.width, img.height).data; const rValues = []; const gValues = []; const bValues = []; for (let i = 0; i < imageData.length; i += 4) { rValues.push(imageData[i]); gValues.push(imageData[i + 1]); bValues.push(imageData[i + 2]); } rValues.sort((a, b) => a - b); gValues.sort((a, b) => a - b); bValues.sort((a, b) => a - b); const medianIndex = Math.floor(rValues.length / 2); const r = rValues[medianIndex]; const g = gValues[medianIndex]; const b = bValues[medianIndex]; return `rgb(${r}, ${g}, ${b})`; } // 使用示例 const imgElement = document.getElementById('myImage'); imgElement.onload = () => { const medianColor = getMedianColor(imgElement); console.log('中位數值顏色:', medianColor); };這種方法在一定程度上解決了平均值法的問題，但仍然無法很好地處理顏色分布不均勻的情況。
-
顏色頻率統計法（K-Means 聚類）：這種方法相對復雜，但效果更好。首先，統計圖片中所有顏色的出現頻率，然后使用K-Means聚類算法，將顏色聚類成幾個簇，每個簇的中心點就是一種代表顏色。選擇像素最多的簇的中心點作為主色。
// 簡化的K-Means聚類（需要引入K-Means庫，例如kmeans-js） async function getDominantColorKMeans(img, k = 3) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, img.width, img.height).data; const colors = []; for (let i = 0; i < imageData.length; i += 4) { colors.push([imageData[i], imageData[i + 1], imageData[i + 2]]); } // 使用kmeans-js庫進行聚類 const kmeans = new KMeans({ k: k }); const clusters = await kmeans.cluster(colors); // 找到像素最多的簇 let maxClusterIndex = 0; let maxClusterSize = 0; for (let i = 0; i < clusters.length; i++) { if (clusters[i].points.length > maxClusterSize) { maxClusterSize = clusters[i].points.length; maxClusterIndex = i; } } // 返回像素最多的簇的中心點顏色 const dominantColor = clusters[maxClusterIndex].centroid; return `rgb(${Math.round(dominantColor[0])}, ${Math.round(dominantColor[1])}, ${Math.round(dominantColor[2])})`; } // 使用示例 const imgElement = document.getElementById('myImage'); imgElement.onload = async () => { const dominantColor = await getDominantColorKMeans(imgElement); console.log('K-Means主色:', dominantColor); };
這種方法能更好地提取出圖片的主色，但計算量也相對較大，需要引入第三方庫，例如kmeans-js。注意kmeans-js庫需要在支持async/await的環境下使用。
如何優化圖片顏色提取的性能？
圖片顏色提取，尤其是使用K-Means這種算法，對性能要求比較高。如果圖片很大，計算量會非常大。可以考慮以下優化方法：
-
縮小圖片尺寸：在提取顏色之前，將圖片縮小到合適的尺寸，可以大大減少計算量。可以使用Canvas的drawImage方法進行縮放。
-
抽樣像素：不必遍歷所有像素，可以每隔幾個像素取一個樣本，這樣也能減少計算量，而且對結果影響不大。
-
使用更高效的顏色空間：RGB顏色空間不太適合顏色聚類，可以考慮使用HSL或Lab顏色空間，這些顏色空間更符合人類的視覺感知。
如何處理透明像素？
如果圖片包含透明像素，需要特殊處理。可以在統計顏色時，忽略透明像素，或者將透明度考慮進去，例如將透明度作為K-Means聚類的一個維度。
// 忽略透明像素的示例 function getAverageColorWithAlpha(img) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, img.width, img.height).data; let r = 0, g = 0, b = 0; let pixelCount = 0; for (let i = 0; i < imageData.length; i += 4) { const alpha = imageData[i + 3]; if (alpha > 0) { // 忽略透明像素 r += imageData[i]; g += imageData[i + 1]; b += imageData[i + 2]; pixelCount++; } } if (pixelCount === 0) { return 'rgba(0, 0, 0, 0)'; // 如果所有像素都是透明的，返回透明色 } r = Math.floor(r / pixelCount); g = Math.floor(g / pixelCount); b = Math.floor(b / pixelCount); return `rgb(${r}, ${g}, ${b})`; }
除了主色，如何提取圖片的多種顏色？
如果需要提取圖片的多種顏色，可以使用K-Means聚類算法，設置k值為需要提取的顏色數量。每個簇的中心點就是一種代表顏色。可以根據簇的大小，對顏色進行排序，選擇最具有代表性的幾種顏色。
