19

canvasユーザーが送信した画像を取得し、要素を介してピクセル データを取得し、何らかの処理を行ってから、ベクトル形状を使用して ( Protovisを使用して) 画像をレンダリングする Web アプリを作成しています。うまく機能していますが、最終的には数千色になり、ユーザーがターゲット パレット サイズを選択して、カラー パレットをそのサイズに縮小できるようにしたいと考えています。

色空間を縮小したい時点で、次のように RGB ピクセル データの配列を操作しています。

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

色から最下位ビットを削除するという素朴なオプションを試してみましたが、結果はかなり悪いものでした。色の量子化アルゴリズムについていくつかの調査を行いましたが、実装方法の明確な説明をまだ見つけていません。これをサーバーに送信し、画像処理プログラムを介して実行し、結果のパレットを返送するという厄介な方法を考え出すこともできますが、クライアント側の JavaScript で行うことをお勧めします。

ここで機能する明確に説明されたアルゴリズムの例を誰かが持っていますか? 目標は、数千色のパレットを、この特定の画像用に最適化された小さなパレットに縮小することです。

編集 (2011 年 7 月 25 日): @Pointyの提案を受けて、(ほとんどの) Leptonica の MMCQ (変更された中央値カット量子化) を JavaScript で実装しました。興味のある方は、こちらのコードをご覧ください。

編集 (2011 年 8 月 5 日): clusterfckライブラリは、これに対する別の優れたオプションのように見えます (ただし、私の実装よりも少し遅いと思います)。

4

2 に答える 2

14

画像からカラー パレットを抽出する Web アプリを作成しました。画像をロードし、そこからカラー パレットを抽出するための 3 つの異なるアルゴリズム/アプローチを試してみることができます。

  1. 単純なヒストグラム
  2. メディアンカット
  3. k平均法

ここで実行されているコピーを見つけることができます

そのコードはgithubで見つけることができます

Javascript で 100% 書かれており、サンプル プロットにはPlotly.jsを使用しています。

また、3 つのアプローチ/アルゴリズムについて詳しく説明した投稿も書きました。

于 2016-12-07T20:40:19.510 に答える
9

画像処理のどの分野でも専門知識をまったく主張しないという警告があります。リンクしたウィキペディアの記事を読み、そこからダンブルームバーグのレプトニカを見つけました。そこから、説明および説明されているアルゴリズムのソースをダウンロードできます。

ソースコードはCであり、理解できるようにJavaScript（少なくともコアの「式」の部分）に十分近いことが望まれます。「MMCQ」アルゴリズムの背後にある基本的な考え方は、それほど複雑ではないようです。これは、画像内の色が凝集する方法に基づいて、3次元色空間をサブキューブに分割するためのヒューリスティックなトリックにすぎません。

于 2011-06-01T19:36:29.597 に答える