Javascript图像主集群颜色

Question

我正在寻找一种方法，通过javascript从图像中找到主要颜色。可能通过一些算法来聚集某些区域。

问题因为如果我使用像素，会计算更多像素。防爆。如果我有棕色和棕色附近的颜色，那么一个白色的部分。主色可以是白色。并不想要颜色平均值，因为无法表示图像的真实颜色。

任何插件，实施代码，网站的建议。提前致谢

更新

这样的事情：

http://www.cssdrive.com/imagepalette/

这里有一些解释，不确定我是否可以重用js代码。

http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/

Answer 1

这很艰难但可行。

第一步是从图像中获取像素数据 - 为此，您需要draw the image onto a canvas element and get the pixel data。请注意，Same Origin Policy适用于图像，因此图像必须与脚本位于同一服务器上，否则您需要使用代理。

现在，您可以将算法应用于像素数据以查找“主”颜色。最简单的选择是平均值，但听起来你不想要那个。那里有很多聚类算法;可能你想要的是执行color quantization以将调色板中的颜色数量减少到一些小数字，然后采用代表图像中最多像素的颜色。

median cut algorithm这是一个很好的，相对简单的选项，尽管它仍然是相当多的编码。我参与了一个小型的爱好项目，用Javascript实现这个算法 - 你可以see my code here。开箱即用对你不起作用，但我可能已经为你完成了大部分艰苦的工作。

Answer 2

也许您可以尝试PnnQuant.js
演示站点：https://mcychan.github.io/PnnQuant.js/demo/

CIEDE2000 色差公式通过选择具有质量：高

的单选按钮进行修改

最重要的是， Web Workers 用于创建后台线程，以调用长时间运行的脚本并处理诸如图像量化之类的计算量大的任务。