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

耗時(shí)的計(jì)算過(guò)程在WebWorker中運(yùn)行。

這是什么想法？

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

原理是遍歷所有的像素點(diǎn)，然后找到最多出現(xiàn)的幾個(gè)像素嗎？

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

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

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

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