rgbaster.jsを使って画像の色を抽出してみよう

こんにちは、おじいちゃんです。

今回は、画像からカラー情報を抽出する方法について書いてみたいと思います。

rgbaster.jsを用いた画像の色を抽出

まずは下記URLからrgbaster.jsをダウンロードします。

rgbaster.js
https://github.com/briangonzalez/rgbaster.js/tree/master

ダウンロードできたら、rgbaster.jsを読み込みます。

<script src="js/rgbaster.js"></script>

サンプリングしたい画像に任意のidをつけてrgbaster.jsで読み込んであげましょう。

<img src="images/sample.jpg" id="sampling" height="600" width="900" alt="">

次にRGBastarのcolorsメソッドに、第1引数でサンプリングしたい画像、第2引数ではオプションを指定して読み込んでみてください。

• paletteSize： 抽出する色のブロック範囲
• exclude： 除外したいカラー
• success： 抽出したカラー情報を格納したpayloadオブジェクトに返します

var sampleImage = document.getElementById('sampling');

	RGBaster.colors(sampleImage, {
	  paletteSize: 30,　
	  exclude: [ 'rgb(0,0,0)' ],
	  success: function(payload) {
	    console.log(payload.dominant);
	    console.log(payload.secondary);
	    console.log(payload.palette);
	  }
	});
})();

payloadオブジェクトには抽出した画像のドミナントカラー、セカンダリーカラー、パレット情報が格納されています。

画像の色情報が出力されましたね。

さて、どのようにして画像の色を読み込んでいるんでしょうか。

画像の色を抽出している仕組み

img画像からは色情報を抽出することができません。
色情報を抽出したい場合は、一度img画像をcanvasに変換してあげる必要があります。

画像サイズに合わせたcanvas描画域を作成

まずはimgの画像をcanvasに変換してみましょう。

<img src="images/sample.jpg" id="sampling" height="600" width="900" alt="">

var $img = $('#sampling'), //取得したい画像を取得
	　　　imgW = $img.width(), //画像の横幅を取得
	　　　imgH = $img.height(); //画像の高さを取得

	//取得した画像サイズのcanvasを追加
	$(body).append('<canvas id="myCanvas" width="'+imgW+'" height="'+imgH+'"></canvas>');

	//生成したcanvasにimgを描画
	var canvas = document.getElementById('myCanvas'),
		ctx = canvas.getContext('2d');

	//取得した画像を新しいオブジェクトとして生成
	var image = new Image();
	image.src = $img.attr("src");

	// drawImage(image.src,translateX,translateY)
	ctx.drawImage(image,0,0);

これでimg画像と同じcanvasができました。

pxごとのデータを抽出

生成したcanvasのオブジェクトからpx情報を取得したい場合は、getImageDataメソッドを使います。getImageData（x軸の初期値，y軸の初期値，x軸の範囲，y軸の範囲）を指定してpx情報を取得しましょう。

//canvasのpx情報を取得
	var imageData = ctx.getImageData(0,0,imgW,imgH);	//全体のカラー情報を取得

取得できましたか？
px情報はgetImageData.dataに格納されています。

ここで1つ注意です。
px情報はrgbaがセットになっており、1pxにつき4つの情報が格納されています。
つまり、100px×100pxのpx情報を取得したい場合は 100×100×4=40000個の色情報を取得することになり、表示するとかなりの負荷がかかります。

前述したrgbaster.jsでは抽出する範囲をオプションで指定してあげているので、全ての色情報を取得はしていませんが、画像に使われている比較的多い色を抽出しています。

まとめ

いかがでしたか？
rgbaster.jsを使えば、画像回りの背景色を画像から抽出したドミナントカラーにしたり、抽出の対象となったパレットのカラー情報を並べたりすることができます。
Webでの表現の1つにしてみてはいかがでしょうか。

それでは、お達者でのぅ。

【おじいちゃんのJS講座】

※ Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ

※ フロントエンド用パッケージマネージャーBowerの導入方法と使い方

※ Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法

※ ブラウザ対応が簡単に！「modernizr.js」の機能と利用方法

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。