找到圖像中的主色。
Palette 可以幫助你找到圖片中的主色。
V2ex 介紹：https://www.v2ex.com/amp/t/503218
Github：https://github.com/Luminqi/Palette
Demo：https://color.luminqi.com/
Github 文件本站下載：
Palette-master.zip
提取碼：無
解壓碼：無
如何使用？
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 值。
