• HOME
  • BLOG
  • Flash
  • モノクロの画像の白い領域の透明化 解説 AS3

モノクロの画像の白い領域の透明化 解説 AS3

前回投稿では、モノクロの画像の白い領域の透明化Airアプリを紹介しましたが、
それで使用している、As3によるBitmapData処理の説明の紹介です。

ActionScript では BitmapData を用い、以下 RGBAの4つのチャンネル、

  • BitmapDataChannel.RED
  • BitmapDataChannel.GREEN
  • BitmapDataChannel.BLUE
  • BitmapDataChannel.ALPHA

にアクセスすることができます。

透過マスクとなる、アルファチャンネルは、
モノクロのBitmapDataをソースとした場合、
黒い部分(00)が透過し、白い部分(FF)は透過されません。
中間色は、値にあわせ半透明となります。

このルールの元とすることで、
本題目の、白い領域の透明化は、
元画像を階調反転したものを、アルファチャンネルに与えることで、
期待の結果を得ることができます。

Actionscript での透明化処理は、以下の3ステップです。

  1. モノクロの画像(以下ソース画像)を階調反転したBitmapData(以下階調反転画像)を用意
  2. ソース画像と同じサイズの、黒く塗りつぶされたBitmapData(以下結果画像)を用意
  3. 階調反転画像のRGBいずれかのチャンネルを、結果画像のアルファチャンネルにコピー

モノクロ画像の場合は、RGB3つのチャンネルは、
同じ値を持つので、コピー元とするチャンネルは、RGB いずれの場合でも
同じ結果となります。

画像の階調反転は、As3 の ColorMatrixFilter を使うことで
簡単に作ることができます。

チャンネルのコピーも、
BitmapData.copyChannel メソッドで簡単に扱えます。

以下にコードです。

[as3]
import flash.display.BitmapData;
import flash.filters.ColorMatrixFilter;
import flash.display.BitmapDataChannel;

//ソース画像
var _source:BitmapData = … ソースなるBitmapDataをとりだしておきます。

//1.階調反転
var matrixNegative:ColorMatrixFilter = new ColorMatrixFilter([-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0]);
_source.applyFilter(_source,_source.rect,new Point(0,0),matrixNegative);

//2.黒く塗りつぶしたBitmapDataを用意
var _result:BitmapData = new BitmapData(_source.width,_source.height,true,0x000000FF);

//3.アルファチャンネルにコピー
_result.copyChannel(_source,_source.rect,new Point(0,0),BitmapDataChannel.RED,BitmapDataChannel.ALPHA);
[/as3]

黒で塗り潰しているところを別の色に変えれば、塗り潰しエリアの結果を変えることもできますね。

次のエントリーでは、カラー画像の黒成分の透明変換に挑戦します。