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 值。