How to combine 2 bitmaps via color mask?

Question

I want to use 3 bitmaps to create 1 resulting bitmap. The first will be the background. The second shall be drawn on top of the first with the help of a mask.
The images are loaded into Bitmap/BitmapData objects.

Example:
(red-green image is the mask, red is the visible part)

  back      mask    source    result

enter image description here

So how can I do that? What drawing function do I use in ActionScript-3?

Thanks for any help!

Edit:
(my first working solution, works only with pure red, green or blue)

var back: BitmapData = // load the back image
var mask: BitmapData = // load the mask image
var source:BitmapData = // load the source image (32-bit)
var result:BitmapData = back.clone();

// clone source because it will be modified in next step
var source2: BitmapData = source.clone();

// red of the mask becomes the alpha channel of source2
source2.copyChannel(mask, new Rectangle(0, 0, mask.width, mask.height), new Point(0, 0), BitmapDataChannel.RED, BitmapDataChannel.ALPHA);

// draw source2 to result           
result.draw(source2);

(Is there a more efficient way? In this solution I have to clone source in order to keep original source bitmap intact.)

You always have to clone source because, well, it's a source. The other way is using movieclip with a mask inside. — Andrei Nikolaenko

gabriel gabriel · Accepted Answer · 2015-02-13T11:03:25

I don't know if it's the best way (performance and logic), but you can try:

var background:BitmapData = new Background();
var bmd1:BitmapData = new Mask();
var bmd2:BitmapData = new SourceImage();

var bmDiff:Bitmap = new Bitmap(mergeMaskAndBackground(bmd2, background, bmd1));
addChild(bmDiff);

function mergeMaskAndBackground(src:BitmapData, background:BitmapData, msk:BitmapData):BitmapData
{
     var diffBmpData:BitmapData = BitmapData(src.compare(msk)); 
     diffBmpData.floodFill(0, 0, BitmapDataChannel.RED);

     diffBmpData.draw(background, new Matrix(), new ColorTransform(), BlendMode.OVERLAY, background.rect, true);

     return diffBmpData;
}

How to combine 2 bitmaps via color mask?

1 Answers