javascript - 查找图像的最常见颜色

Question

我在一个页面上有一堆具有 200x200 图像的产品。我的第一次运行是获取每个像素的数据（嵌套 for 循环，一个用于 x，一个用于 y），然后将 rgb 转换为十六进制，并将它们存储在一个数组中，然后获取最常见的一个。此脚本需要一次在每页上运行 96 个项目。

目前，它创建一个画布并将产品图像放入该画布中，然后执行上述操作。

是否有某种平均算法可以使这更快？

score 16 · Accepted Answer

是的！

Lokesh Dhakar 创建了一个名为“color thief”的脚本，用于计算图像的主色。它使用改进的中值切割量化算法 (MCCQ) 来快速聚类颜色并确定主色（甚至整个调色板）。

score 1 · Accepted Answer

我知道这听起来很容易使用库，但我找到了一个更简单的解决方案，几乎可以达到目的。当您应用模糊滤镜时，它的作用是取像素强度的平均值。因此，如果您对具有相当高像素值的图像应用模糊，例如

filter:blur(30px);

或者

filter:blur(50px);

或任何适合的东西，它会平均整个图像，并为您提供纯色背景色，这在大多数情况下是图像中的突出颜色。

它的操作要简单得多，并且几乎总是可以工作。只需尝试修改模糊量。

还要记住将 overflow-y 设置为隐藏，因为高模糊会导致图像外部出现白色填充。隐藏溢出将解决这个问题。

希望有帮助:)

2 回答 2