19

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

在我想减少色彩空间的地方，我正在处理一组 RGB 像素数据，如下所示：

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

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

有没有人有一个可以在这里工作的清晰解释的算法的例子？目标是将数千种颜色的调色板减少为针对此特定图像优化的较小调色板。

编辑（2011 年 7 月 25 日）：我接受了@Pointy 的建议，并在 JavaScript 中实现了（大部分）Leptonica 的 MMCQ（修改后的中值切割量化）。如果你有兴趣，你可以在这里查看代码。

编辑（2011 年 8 月 5 日）： clusterfck库看起来是另一个不错的选择（尽管我认为它比我的实现慢一点）。

4

2 回答 2

14

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

  1. 简单的直方图
  2. 中切
  3. k-均值

您可以在此处找到运行的副本

你可以在github上找到它的代码

它 100% 用 Ja​​vascript 编写，并使用Plotly.js作为示例图。

我还写了一篇文章，更详细地描述了这三种方法/算法——你可以在这里找到

于 2016-12-07T20:40:19.510 回答
9

需要注意的是，我在任何图像处理领域都没有任何专业知识：我阅读了您链接的维基百科文章，并从那里找到了 Dan Bloomberg 的Leptonica。从那里您可以下载讨论和解释的算法的源代码。

源代码是 C 语言，希望它与 JavaScript 足够接近（至少在核心“公式”部分）可以理解。“MMCQ”算法背后的基本思想似乎并不复杂。这实际上只是一些启发式技巧，用于根据图像中颜色聚集在一起的方式将 3 维颜色空间分成子立方体。

于 2011-06-01T19:36:29.597 回答