Javascriptの画像メインクラスタの色

Question

私は方法のトラフを探していますjavascript画像からの主な色を見つける。おそらく、いくつかの領域をクラスタリングするいくつかのアルゴリズムを介して。

問題ピクセルを使用すると、使用されるピクセルが増えるためです。 Ex。私は茶色と非常に色が茶色の横にある場合は、白い部分です。主な色は白色になる可能性があります。そして、画像の実際の色を表すことができないので、色の平均が必要ではありません。

プラグインの提案、実装するコード、ウェブサイト。事前に感謝

UPDATE

このような何か：ここにあり

http://www.cssdrive.com/imagepalette/

私はjsのコードを再利用することができるかどうか確認してください説明する何か、ではありません。

http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/

Answer 1

これは厳しいけどなんとかです。

最初のステップは、画像からピクセルデータを取得することです。これを行うには、draw the image onto a canvas element and get the pixel dataが必要です。 Same Origin Policyがイメージに適用されるので、イメージはスクリプトと同じサーバー上になければならないか、プロキシを使用する必要があります。

ピクセルデータにアルゴリズムを適用して、「メイン」カラーを見つけることができます。最も簡単な選択肢は平均ですが、あなたが望んでいないように思えます。そこには多くのクラスタリングアルゴリズムがあります。おそらくあなたがしたいのは、color quantizationを実行して、パレット内の色の数をいくつかの小さな数に減らし、次に画像内の最も多くのピクセルを表す色を取ることです。

median cut algorithmはここでは比較的簡単なオプションですが、かなりの量のコーディングです。私は小さなホビープロジェクトでこのアルゴリズムをJavascriptで実装しました。see my code hereです。それはあなたのために箱の外で働くことはありませんが、私はたぶんあなたのために大切な仕事をしました。