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

问题描述

我正在写一个web应用程序需要用户提交的图像，通过画布元素中获取像素数据，做了一些处理，再利用渲染图像矢量图形（使用 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], ...]

我试图从色彩仅仅取消最低显著位的天真的选项，但结果pretty的坏。我已经做了在颜色量化算法的一些研究，但还没有找到如何实现一个清晰的描述。我大概可以制定出一个cludgy的方式来发送这个到服务器，运行它，虽然图像处理程序，并发送所产生的调色板回来了，但我想preFER做在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.

有没有人有一个清楚的解释算法的一个实例（或更好，但实际的Javascript实现），将在这里工作？的目标是减少的几千颜色的调色板到一个较小的调色板此特定图像进行优化

Does anyone have an example of a clearly explained algorithm (or better yet, an actual Javascript implementation) that would work here? The goal is to reduce a palette of several thousand colors to a smaller palette optimized for this specific image.

修改（11年7月25日）：我把@尖尖的建议和实施（大多数）Leptonica的MMCQ（修正值切量化）在Javascript中。如果你有兴趣，你可以看到code这里

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.

修改（11年8月5日）：的 clusterfck库看起来像另一个不错的选择这个（虽然我认为它比我的实现有点慢）。

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).

推荐答案

通过，我不要求任何专业知识在所有的图像处理任何领域的警告：我读了您链接维基百科的文章，并从那里发现丹彭博的 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 $ C是C，这希望是足够接近的JavaScript（至少在核心的公式部分），是可以理解的。背后的MMCQ算法的基本思路似乎并没有超级复杂。这真的只是一些启发式的技巧分裂了3维色彩空间为基础色的方式，将图像聚集在一起子立方体。

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屋！