JavaScript中的颜色量化/缩小图像调色板的算法?

时间:2011-06-01 18:29:06

标签: javascript algorithm colors palette

我正在编写一个Web应用程序,它采用用户提交的图像,通过canvas元素获取像素数据,进行一些处理,然后使用矢量形状渲染图像(使用Protovis )。它运行良好,但我最终得到了几千种颜色,我想让用户选择一个目标调色板大小并将调色板减少到那个大小。

在我想减少色彩空间的时候,我正在处理一组RGB像素数据,如下所示:

[[190,197,190], [202,204,200], [207,214,210], [211,214,211], [205,207,207], ...]

我尝试了从颜色中删除最低有效位的天真选项,但结果非常糟糕。我已经对color quantization算法做了一些研究,但还没有找到如何实现算法的清晰描述。我可能会想出一种方法将它发送到服务器,通过图像处理程序运行它,然后发回生成的调色板,但我更喜欢在客户端使用JavaScript。

有没有人有一个明确解释算法的例子可以在这里工作?目标是将几千种颜色的调色板缩小为针对该特定图像优化的较小调色板。

编辑(7/25/11):我采用了@Pointy的建议并在JavaScript中实现了(大部分)Leptonica的MMCQ(修改后的中值切换量化)。如果您有兴趣,可以see the code here.

编辑(8/5/11): clusterfck library看起来像是另一个很好的选择(虽然我觉得它比我的实现慢一点。)

2 个答案:

答案 0 :(得分:9)

有一点需要注意,我在任何图像处理领域都没有任何专业知识:我阅读了你链接的维基百科文章,并从那里找到了Dan Bloomberg的Leptonica。从那里你可以download讨论和解释算法的来源。

源代码在C中,希望它足够接近JavaScript(至少在核心“公式”部分中)是可以理解的。 “MMCQ”算法背后的基本思想似乎并不复杂。它实际上只是一些启发式技巧,可以根据图像中颜色的方式将三维颜色空间分割成子立方体。

答案 1 :(得分:5)

我写了一个从图像中提取调色板的Web应用程序。它允许您加载图像,然后使用三种不同的算法/方法来从中提取调色板:

  1. 简单直方图
  2. Median Cut
  3. k均值
  4. 您可以找到运行here

    的副本

    您可以在github

    上找到相应的代码

    它在Javascript中100%编写,并使用Plotly.js作为示例图。

    我还写了一篇更详细描述三种方法/算法的文章 - 你可以找到here