JavaScript中的颜色量化/缩小图像调色板的算法？ [英] Algorithm for color quantization/reduced image color palette in JavaScript?

问题描述

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

I'm writing a web app that takes a user-submitted image, gets the pixel data via a canvas element, does some processing, and then renders the image using vector shapes (using Protovis). It's working well, but I end up with several thousand colors, and I'd like to let the user pick a target palette size and reduce the color palette to that size.

在我想减少色彩空间的时候，我正在使用一组RGB像素数据，如下所示：

At the point where I want to reduce the color space, I'm working with an array of RGB pixel data, like this:

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

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

I tried the naive option of just removing least-significant bits from the colors, but the results were pretty bad. I've done some research on color quantization algorithms, but have yet to find a clear description of how to implement one. I could probably work out a cludgy way to send this to the server, run it though an image processing program, and send the resulting palette back, but I'd prefer to do it in JavaScript on the client side.

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

Does anyone have an example of a clearly explained algorithm that would work here? The goal is to reduce a palette of several thousand colors to a smaller palette optimized for this specific image.

编辑（7/25/11）：我接受了@Pointy的建议并在JavaScript中实现了（大部分）Leptonica的MMCQ（修改后的中值切换量化）。如果您有兴趣，可以在此处查看代码。

Edit (7/25/11): I took @Pointy's suggestion and implemented (most of) Leptonica's MMCQ (modified median cut quantization) in JavaScript. If you're interested, you can see the code here.

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

Edit (8/5/11): The clusterfck library looks like another great option for this (though I think it's a bit slower than my implementation).

推荐答案

随着我在任何图像处理领域都没有任何专业知识的警​​告：我阅读了你链接的维基百科文章，并从那里找到了Dan Bloomberg的 Leptonica 。从那里，您可以下载所讨论和解释的算法的来源。

With the caveat that I don't claim any expertise at all in any field of image processing: I read over the Wikipedia article you linked, and from there found Dan Bloomberg's Leptonica. From there you can download the sources for the algorithms discussed and explained.

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

The source code is in C, which hopefully is close enough to JavaScript (at least in the core "formula" parts) to be understandable. The basic ideas behind the "MMCQ" algorithm don't seem super-complicated. It's really just some heuristic tricks for splitting up the 3-dimensional color space into sub-cubes based on the way colors in an image clump together.

这篇关于JavaScript中的颜色量化/缩小图像调色板的算法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！