画像からプライマリカラーを取得する jQuery プラグインを作りました

#javascript, #jquery, #plugin

iTunes のアルバムビューでアートワークをクリックすると、背景色がアートワークのプライマリカラーで塗りつぶされる効果がありますが、アレをこのサイトのアイキャッチのところでやりたいなぁと思いプラグインを作りました。

iTunes は単純にプライマリカラーを取得しているわけではなく、外周内側付近のプライマリカラーを取得するなど複雑なアルゴリズムが使われています。今回は、高機能ではなくもっと軽いものがよかったので、以下の様な機能でさくっとシンプルに実装しました。

  • 指定した img を処理する
  • 読み込んだ画像の中で一番使われているカラーを抽出して返す
  • コールバックを実行する

2015/10/10 追記

アップデートしました。

jquery.primarycolor.js

使い方は、プライマリカラーを取得したい img 要素に対して primaryColor() するだけです。コールバック関数で取得したカラーを使ってなんやかんや操作します。

1
2
3
4
5
6
7
$(function() {
$('img.cover-img').primaryColor({
callback: function(color) {
$(this).parent().css('background-color', 'rgb('+color+')');
}
});
});

一度取得したカラーは、img 要素の data 属性 primary-color に格納し使いまわすので、プライマリカラー取得処理は実行されません。

一応パラメータを用意しています。

keydefaultdescription
skip5負荷軽減のために読み飛ばす px 数
callbacknullプライマリカラー取得後に実行する関数

デモ

http://rythgs.co/demo/primarycolor/

対応ブラウザ

とりあえず動作確認できたのは次のブラウザです。

  • Google Chrome
  • Safari
  • IE9+

Download

https://github.com/rythgs/jquery.primarycolor.js