JavaScript中顏色量化/縮小圖像調色板的算法？

我正在寫一個網頁應用程序，它需要用戶提交的圖像，通過canvas元素獲取像素數據，進行一些處理，然後使用矢量形狀呈現圖像（使用Protovis）。它運行良好，但我最終獲得了數千種顏色，我希望讓用戶選擇一個目標調色板大小並將調色板減少到該大小。JavaScript中顏色量化/縮小圖像調色板的算法？

在這裏我想減少顏色空間中的點，我與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.

編輯（11年8月5日）：的clusterfck library看起來像這樣另一個偉大的選項（雖然我認爲它比我的執行慢一點）。

來源

2011-06-01 nrabinowitz

而不是僅僅砍掉一些位，並在該離開它，也許你可以用6位或4 *分組*實際顏色的位值。一旦你確定了這些組，你就可以計算出每個組的所有實際成員的平均值（或者中位數或其他）。（請注意，我對圖像處理理論幾乎一無所知:-) – Pointy 2011-06-01 18:35:25

......哈哈，我輸入的是「算法」下的第一段所說的，幾乎:-) – Pointy 2011-06-01 18:37:21

@Pointy - yup :)。我希望有人能爲此提供一個好的算法 - 我得到的基本思想是「集羣，然後採取每個集羣的意思」，但我在海上談論如何進行集羣。 – nrabinowitz 2011-06-01 19:10:08

隨着我在圖像處理的任何領域都沒有聲稱任何專業知識的警告：我閱讀了您鏈接的維基百科文章，並從那裏找到丹布隆伯格的Leptonica。從那裏你可以討論和解釋算法的來源。

源代碼使用C語言，希望它足夠接近JavaScript（至少在覈心「公式」部分中）是可以理解的。「MMCQ」算法的基本思想看起來並不複雜。這實際上只是一些基於圖像中顏色聚集的方式將三維色彩空間分解爲子立方體的啓發式技巧。

來源

2011-06-01 19:36:29 Pointy

嗯，我希望得到僞代碼或我知道的語言 - 但現在看起來我有一個週末編碼項目:)。 – nrabinowitz 2011-06-04 20:08:54

從此有過任何事情嗎？我正在尋找類似的東西。 – asbjornenge 2013-02-18 06:45:27

我寫了一個web應用程序，從圖像中提取調色板。它允許你加載圖像，然後玩弄三種不同的算法提取它調色板/方法：

簡單直方圖化
正中切
的k-means

你可以找到運行的一個副本here

你可以找到它的代碼github

這是用Javascript寫的100％，並使用Plotly.js爲例子的情節。

我還寫了描述三種方法後/更詳細的算法 - 你可以找到here

來源

2016-12-07 20:40:19 mattnedrich

很酷，感謝發佈！ – nrabinowitz 2016-12-08 00:29:23

JavaScript中顏色量化/縮小圖像調色板的算法？

回答

相關問題