こんにちは。ジュディマリの「イロトリドリノセカイ」が好きなandoです。

BitmapDataのgetPixel()とsetPixel()を使って、色とりどりな画像をRed Green Blueに抽出分解してみました。

サンプルはこちら。

 

 

こちらの画像を使うと効果がわかりやすいですよ・・・

rgb.png

簡単な解説

BitmapData.getPixel(x位置, y位置)は、指定した位置の色情報を取得するメソッドです。これを元画像のpixel数だけ繰り返し、同時に赤、緑、青に分解します。

もし赤緑青それぞれの値を使いたい場合、赤の成分は上位8ビット、緑は真ん中の8ビット、青は下位8ビットなので

//色情報をr,g,bに分解します
r = rgb >> 16 & 0xff;
g = rgb >> 8 & 0xff;
b = rgb & 0xff;

このようにして下位にシフト&論理積してやる必要があります。このあたりの話は「ビット演算 AND OR」などで検索すれば面白い話を読めると思います。

色の分解が終わったらそれぞれを24ビットへ戻し、BitmapData.setPixel()メソッドを用いて別なBitmapDataに描画すれば完了です。

//各BitmapDataにsetPixel
redbmd.setPixel(i,j,r << 16);
greenbmd.setPixel(i,j,g << 8);
bluebmd.setPixel(i,j,b);

このように色を分解すれば、例えば画像の赤をすこし高くして暖かみのある色味に編集するとか、カメラ映像から肌色が多いポイントを検知して笑い男マークをかぶせるとかいうことができるようになります。

追記

 Twitterでつぶやいたら@uwitenpenさんに「copyChannelっていうメソッドがあるよ」と教えていただきました。修正版はこちら。これなら一発で抜き出せて簡単ですね。

HTML5飯