• HOME
  • BLOG
  • Flash
  • カラー画像の黒成分の透明変換 解説 AS3

カラー画像の黒成分の透明変換 解説 AS3

需要があるかかなり微妙ですが、気になったので、
カラー画像の黒成分の透明変換についてやってみました。
Actionscript の解説です。

BMAJapan さんが教えてくれた、
Photoshopプラグイン「Un-Multiply」
このプラグインは、画像の黒成分を検出して、その部分を透明化してくれるというものとのことで、
これと同様の処理のAS3解説です。

これまで、モノクロ画像の透過エントリーとはすこしずれますが、
変換処理について、共通する部分が多いので掘り下げてみたいと思います。

黒成分の透明変換って?

ちょっとなんかよくわからないので、先に、結果から見ていきます。

ソース画像には、黒成分を含んだものにしたいので「夜景」で検索したらでてきたこれを選びました。
moriginal
wikipediaよりもってきました

変換後はこのようになります。
mc_img0

ちょっとわかりにくいので、下にカラーレイヤーを敷いてみます。
※Photoshop上での表示をキャプチャしました。
mc_img1
左から、何も敷かない、白を敷く、黒を敷く、です。

黒を敷いてみると、元の画像と同じになるあることがわかりますね。

Actionsctipt解説

Actionscript でのこの処理は、以下の2ステップです。

  1. ソース画像のRGB、この3チャンネルを、各々の色で塗り潰したBitmapDataのALPHチャンネルに各々のチャンネルをコピーします。
  2. これらを BlendMode.SCREEN で重ねあわせます

以下にコードです。

import flash.display.Sprite;
import flash.display.BlendMode;
import flash.display.BitmapDataChannel;
import flash.display.BitmapData;
import flash.display.Bitmap;
	
//元画像BitmapData
var _source:BitmapData;

//結果画像BitmapData
var _result:BitmapData;

_source = ... ソースなるBitmapDataをとりだしておきます。

//
//RGB各成分の抽出
//

//赤成分

	//赤で塗りつぶしたBitmapDataを準備
	var cbmpd_R:BitmapData = new BitmapData(_source.width, _source.height, true, 0xFFFF0000);
	
	//REDチャンネルをALPHAチャンネルにコピー
	cbmpd_R.copyChannel(_source,_source.rect,new Point(0,0),BitmapDataChannel.RED,BitmapDataChannel.ALPHA);

//緑成分

	//緑で塗りつぶしたBitmapDataを準備
	var cbmpd_G:BitmapData = new BitmapData(_source.width,_source.height,true,0xFF00FF00);
	
	//GREENチャンネルをALPHAチャンネルにコピー
	cbmpd_G.copyChannel(_source,_source.rect,new Point(0,0),BitmapDataChannel.GREEN,BitmapDataChannel.ALPHA);

//青成分

	//青で塗りつぶしたBitmapDataを準備
	var cbmpd_B:BitmapData = new BitmapData(_source.width,_source.height,true,0xFF0000FF);
	
	//BLUEチャンネルをALPHAチャンネルにコピー
	cbmpd_B.copyChannel(_source,_source.rect,new Point(0,0),BitmapDataChannel.BLUE,BitmapDataChannel.ALPHA);

//
//それぞれを表示上で重ね合わせます。
//

	//入れ物を作成
	var wrapper:Sprite = new Sprite();
	
	//赤成分Bitmapを入れる
	var bmpR:Bitmap = new Bitmap(cbmpd_R);
	wrapper.addChild(bmpR)
	
	//緑成分Bitmapを入れる
	var bmpG:Bitmap = new Bitmap(cbmpd_G);
	wrapper.addChild(bmpG)
	
	//青成分Bitmapを入れる
	var bmpB:Bitmap = new Bitmap(cbmpd_B);
	wrapper.addChild(bmpB)

	//BlendMode.SCREENを設定
	bmpG.blendMode = BlendMode.SCREEN;
	bmpB.blendMode = BlendMode.SCREEN;

//結果をBitmapDataに描画
_result = new BitmapData(wrapper.width, wrapper.height, true, 0x00000000);
_result.draw(wrapper);

ちょっとどういう時につかえるか謎ですが、
なにかにつかえそうかもです。

この機能を付け加えた、Adobe Air アプリ White2Opacity を公開しています。
「Color 画像として処理」にチェックを入れた後、変換したい画像を投げ込んでください。