Palette 可以幫助你找到圖片中的主色。

V2ex 介紹：https://www.v2ex.com/amp/t/503218

Github：https://github.com/Luminqi/Palette

Demo：https://color.luminqi.com/

Github 文件本站下載：

如何使用？

Palette.from可以接受元素或路徑

Palette.from('/path/to/image').getPalette().then(colors => {
  // your code
})

-

const img = document.getElementById('img')
Palette.from(img).getPalette().then(colors => {
  // your code
})

耗時的計算過程在WebWorker中運行。

這是什么想法？

• 它將首先開始欠采樣以減少圖像像素。
• 計算每個像素的色調，并按色調對像素進行排序。
• 將具有相似色調的像素分組。
• 如果組中的像素很少或者它們的平均顏色太近，則合并這些組。

原理是遍歷所有的像素點，然后找到最多出現的幾個像素嗎？

首先像素的 rgb 值有 256*256*256 種可能，所以如果直接遍歷然后統計相同的 rgb 值是不靠譜的。

這里其實會涉及到色彩量化(color quantization)。比較常見的算法有 Median cut, Octree, KMeans。

我并沒有采用常規的方案，我的想法是如果能先把各個像素按照其顏色相近度排序，這樣相似的顏色就會靠在一起，形成一條連續的色帶。那么剩余的工作就很簡單了，就是把這條色帶切成一塊一塊，每一塊代表一種顏色，每一塊的顏色是它里面所有像素 rgb 值的平均值。比較可惜的是其實并不能完全對顏色排序，這里我采用色調(hue)進行排序并不完美。

你提出的算法我也想過，我覺得可以先對每個像素的 r 值，g 值，b 值向右位移(>>)3 位（或者更多），這樣可以減少出現不同 rgb 值的概率。然后用一個 hash map 統計相同的 rgb 值。