画像からプライマリカラーを取得するjQueryプラグインをアップデートしました

, ,

以前作成した画像のプライマリカラーを取得するjQueryプラグインをアップデートしました。

  • 見た目の色と取得できた色に違いがあったりする
  • rgb(0, 0, 0)がプライマリカラーとして判定されない
  • コールバック関数の指定がすっきりしない
  • リファクタしたい

などがあり1からロジックを書き直して上の問題を解消しました。
判定速度も1.5倍くらいになっているかと思われます。

近似色判定を行うように

以前はRGBの値が少しでも異なると違う色として判定しておりましたが、近似色判定を行いどうやら同じ色っぽいということでプライマリカラーを判定しています。見た感じこの色がプライマリカラーっぽいんだけど、取得された色と違うなぁというのが解消されているはず。また、色の出現回数を格納するオブジェクトの肥大を防げるのでメモリ的にもいいかなと。

コールバック関数をすっきり指定できるように

コールバックの指定がいまいちで、

$('img').primaryColor({
  callback: function(color) {
    $(this).parent().css('background-color', 'rgb('+color+')');
  }
});

などと記述しないといけませんでしたが、以下のように

$('img').primaryColor(function(color) {
  $(this).parent().css('background-color', 'rgb('+color+')');
});

すっきり記述できるようにしました。オプション設定のために以前の記述にも対応しております。

Demo & Download