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

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

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

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

---

2015/10/10 追記

アップデートしました。

jquery.primarycolor.js

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

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

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

key	default	description
skip	5	負荷軽減のために読み飛ばす px 数
callback	null	プライマリカラー取得後に実行する関数

デモ

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

対応ブラウザ

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

• Google Chrome
• Safari
• IE9+

Download

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