Javascript 查找图像的最常见颜色

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

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

是否有某种平均算法可以加快计算速度？

是的

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

---

这里有一个演示：这个脚本可以在github上找到：

我知道它听起来很容易使用库和所有东西，但我发现了一个更简单的解决方案，几乎可以满足这个目的。 应用模糊过滤器时，它所做的是获取像素强度的平均值。因此，如果你对图像应用模糊，像

filter:blur(30px);

或

或者任何适合的，它平均了整个图像，并为您提供了一个坚实的背景色，大部分时间是图像的突出颜色

这样做要简单得多，而且应该几乎总是有效的。只要尝试修补模糊量

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

---

希望对您有所帮助：）

您当前的算法是什么？它在内部使用了

canvas.getImageData（）

，因此您可能会遇到“污染画布”安全警告问题。

filter:blur(50px);