我正在寻找一种通过 JavaScript 从图像中找到主要颜色的方法。可能通过聚类某些区域的算法来实现。
问题在于如果我使用像素，将会计算更多使用的像素。例如，如果我有棕色和非常接近棕色的其他颜色，然后是一个白色的部分。主要颜色可能是白色。而且不想使用颜色平均值，因为可能不能代表图像的真实颜色。
任何插件、代码实现或网站建议都将不胜感激。谢谢！
更新
类似于这样：
http://www.cssdrive.com/imagepalette/
这里有一些解释，不确定能否重复使用js代码。
2个回答
3
虽然有一定难度，但也可行。
第一步是从图像中获取像素数据 - 为此，您需要将图像绘制到canvas元素上并获取像素数据。请注意同源政策适用于图像，因此图像必须与脚本位于同一服务器上，否则您需要使用代理。
现在，您可以对像素数据应用算法以找到“主要”颜色。最简单的选择是平均值，但听起来您可能不想要那个。有很多聚类算法可供选择；您可能需要执行颜色量化以将调色板中的颜色数量减少到某个小数字，然后选择代表图像中最多像素的颜色。
中值切割算法是一个不错、相对简单的选择，尽管它仍需要相当多的编程。我曾经在一个小的业余项目中使用Javascript实现了这个算法 - 你可以在这里看到我的代码。它不能直接为您工作，但我可能已经完成了大部分艰苦的工作。
- nrabinowitz
13
是的，抱歉 - 目前这个程序依赖于protovis库（http://mbostock.github.com/protovis/）。只有几个小函数 - 我会将它们移入gist中。 - nrabinowitz
完成可能只需要一个函数，从12个颜色中获取最常用的颜色。不确定如何限制颜色范围。 - Ricardo Rodrigues
3最终获得了一个不错的结果，接近预期。尝试合并您的库并使用以下库：http://harthur.github.com/clusterfck/ 和 https://github.com/harthur/rainbow/tree/master/chrome/content/analyzer。对于未来，这篇文章也可能有帮助：http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/很快将会把代码放在某个地方，并提供最小化的内容，以便人们可以测试和改进代码。 :) 感谢帮助！ - Ricardo Rodrigues
那些看起来非常不错 - 感谢您提供的链接，很高兴您解决了这个问题！ - nrabinowitz
对于那些感兴趣的人，可以随时查看www.brandmymail.com，在自定义主题中上传一张图片...检查所选背景的颜色。 - Ricardo Rodrigues
显示剩余8条评论
0
也许你可以尝试PnnQuant.js
演示网站: https://mcychan.github.io/PnnQuant.js/demo/
此外，选择 质量 为高的单选按钮来采用CIEDE2000颜色差异公式。
除此之外，使用Web Workers创建后台线程来调用长时间运行的脚本并处理计算密集型任务，如图像量化。
- Miller Cy Chan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接