2010/ 08/ 20

PHOTO STOCKERに似た色が使われている画像が簡単に検索できる機能を実装してみました！

この記事は 約 6 分 で読めます。

最近、PHPで画像をいじることを勉強中のYUKIです。

壁紙コレクションを作るときにimage関数をいろいろ使って処理を作ったので最近よくドキュメントをよく見ていたのです。
画像の色を自動的に取得するってなにか特殊なものがいるのかと思っていたのですが、よく考えたらimage関数を使って指定のpixelの色を取得することが出来るんですよね…！！

それを集計とかしたら…ごにょごにょ。

いろいろ出来るんじゃなかろうか…！！！

…ということで、早速実験。

これで似た色画像検索機能が作れるんじゃないか？と思い立ち
PHOTO STOCKERのサイトで さっそく実装してみました♪

で。

こんなかんじになりました！

画像の下に出ている色のところをクリックすると、絞り込み検索します。

処理の流れは以下。

  1. 記事１つにつき、１枚添付画像をもっているので、その添付画像のURLを取得。
  2. その画像をimage関数を使ってそれぞれキーカラーを抽出。
  3. よく使われている色、上位10色を選定、それをWordPressのカスタムフィールドにセット。
  4. WordPressの検索範囲をカスタムフィールドにまで広げる。
  5. 検索ワードにカラーコードをセット（画像の下の色をクリックすると、そのカラーコードを検索ワードとしてURLに渡している）
  6. 同じ色を含む写真を検索して一覧表示

以上です。

1-3の手順は、簡易なプラグイン化してみました。
4は既存のプラグインSearch Everythingを利用してカスタムフィールドの値までを検索対象としました。
5-6はテーマ側で対応。

すんなりできるかと思いきや、画像から10色を選び出す処理のところが、いい感じに色を選ぶっていうのが以外と難しくて…いろいろと詰まったところがあったのでメモ。

※私もまだ勉強中なので、認識まちがっているところがいろいろあるかもしれません。
ここは違うよ！というところがあればご指摘いただけるとうれしいです！

さて、プラグインを作るにあたってまずはテストです。

いい感じに10色をチョイスする実験をしていきます。

今回実験に使ったのはこの画像↓

この画像からいい感じに10色、色をとりたい。

理想は

大体こんな感じでしょうか。

このようなパレットが自動で抽出できるプログラムを作りたいの…！

はじめは普通に全ピクセル順番に抽出して配列に入れて使用頻度の高い色の順に並べ替え、と書いてみました。

が、近似値をまとめていなかったので上位に同じような色ばかりが出てしまい…。

あぅ…水色だらけ。

失敗。

次に思いついたのは画像を分割してブロック分けし
そのブロックごとにPHPで色を取得して集計、ブロック内で一番使用頻度の高い色１色を抽出、
それをさらに配列に入れて、すべてのブロック分繰り返し、
それまた多い順に並べ替えて使用頻度の高い色上位10色を抽出してみました。

えっと…説明下手ですみません。

図で書いてみました。

モザイクパターンみたいにして色を集計しようという作戦。

これで再度集計。。。。

おぉ！俄然いい感じになりました！！！

これで抽出した上位10色のカラーパレットをカスタムフィールドにセットする、という簡易なプラグインを作って、サイトに組み込んでみました！

…が。

またしても問題発生。

近似値をまとめていないので、色の種類が
R 256* G 256* B 256 = 16777216色

こんなにあっては、「青っぽい色」だけでも何百種類…！
ほとんど同じように見える色でも色コードが異なってしまうので、
なかなか同じ色を利用した画像がでてきません…！＞＜

今回の機能の目的としては、色味の近い画像を紐づけることなので
検索の際に近似値検索をして、近いカラーコードのデータがあればそれも表示させるように作ろうかとも考えたのですが、
近似値の計算がやや複雑なので、毎回の検索に時間がかかってしまう…。

なので、データ格納時に似た色はある程度まとめ、
減色した状態でデータを格納して、同じ色が出やすくなるようにすることにしました。

RGBそれぞれの段階を以下のように落とすと

256段階→32段階=32768色
256段階→16段階=4096色
256段階→8段階=512色

こんな感じで減色できそうです。

さてどのあたりまで減らすか…

ということで実験した一覧がこちら↓

（クリックで拡大します）

他にもいろんな画像を試して、
今回は、309000ドット程度の画像を縦横60分割して3600ブロックに、4096色に 減色が一番ベストそうだったので、こちらを採用しています。

ということで、まとめます。

  • 判別する色数が多過ぎると、トップ10が近似値だらけになってしまう。ほどよくいろんな色を拾わせる工夫が必要。（今回は画像を分割してモザイクパターンのようにして色を取得してみた）
  • 色数が多いと、類似色の判定が大変。だけど、減色しすぎると元の色からかけ離れたパレットセットが出来てしまう。個人的には4090色ぐらいがベストかな。
  • 元の画像が小さ過ぎるとリサイズするときに色が落ちているのでチョイスする色がくすみがちになったり、撮れなかったりする。画面のスクリーンショットなら等倍がいいかも？ただ、写真の場合だと、大き過ぎるとノイズ？の色を拾ってしまうので大き過ぎてもダメ。こちらの場合は、ほどほどに縮小したもので判定するのがよいかも。

これは上手く使えばいろいろ楽しく便利に使えそうです…！！
減色の方法も、もうちょっと研究せねば…

RBGよりHSVで考えた方がいいのかな？

PHOTO STOCKERのひそかな新機能
似た色検索、ぜひお試しくださいね♪

PHOTO STOCKER -高解像度のロイヤリティーフリー写真素材-

この画像、チョイスしてる色が変だよーとか、ありましたら、改修の参考にしたいと思いますので
twitterやらコメント欄やらでいろいろご指摘いただけるとうれしいです^^

»

«

関連エントリー