Blending two images together with multiply and % opacity

zeh picture zeh · Oct 12, 2011 · Viewed 13.8k times · Source

I'm trying to blend two images together with Android, using a Multiply-like blending mode.

// Prepare -------------------------------

// Create source images
Bitmap img1 = ...
Bitmap img2 = ...

// Create result image
Bitmap result = ...
Canvas canvas = new Canvas();
canvas.setBitmap(result);

// Get proper display reference
BitmapDrawable drawable = new BitmapDrawable(getResources(), result);
ImageView imageView = (ImageView)findViewById(R.id.imageBlend1);
imageView.setImageDrawable(drawable);


// Apply -------------------------------

// Draw base
canvas.drawBitmap(img1, 0, 0, null);

// Draw overlay
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(Mode.MULTIPLY));
paint.setShader(new BitmapShader(img2, TileMode.CLAMP, TileMode.CLAMP));

canvas.drawRect(0, 0, img2.getWidth(), img2.getHeight(), paint);

This works, but I don't have control over the "amount" of multiply that is done - it's always a complete multiply transfer. Ideally, a 0% multiply would be the same as the base image (img1) without any change, but a 100% multiply would be the result I get with the code above.

paint.setAlpha() doesn't seem to work for this.

Any other way to set the % opacity of the new 'layer'?

P.S. There are some methods to make multiply work with this I guess (using a LightingColorFilter) by pre-multiplying and offsetting the color to white, but it's very specific to the multiplymode .. I'm trying to find a way to apply the opacity/% thing to all other transfer modes too.

Answer

Marcelo Assis picture Marcelo Assis · Oct 15, 2011

I needed to do something like that a while ago, and I found this post about Color Channels a lot enlightening. (But I'm afraid this is related to what you described in your "PS")

Link above in archive.org, thanks to @1j01