Image Blitting in Silverlight with WriteableBitmapEx

During a conversation with Jesse Freeman, AKA the Flash Bum, he directed me to one of his tutorials on image composition with Flash. The tutorial, called Create Random Torn Photos with Actionscript 3.0, demonstrates a very cool way to dynamically apply a torn weathered effect to a photo.

The question then came into play – can you do this in Silverlight?

The answer – yes, yes you can.

Let me explain how I was able to accomplish the same effect.

In Silverlight, the WriteableBitmap class is used to manipulate bitmap data. The current class is pretty low-level, providing access to the bits, but not many convenience features. Thankfully a few community members have started an open source library called WriteableBitmapEx. This library extends the functionality of the WritableBitmap class to include methods for drawing, blending and more.

This was a great start, but for this project two blend modes were missing – Mask and Multiply. I spent a little time implementing the new Blend modes and have since checked them back into the project.  (Thanks go to René Schulte for then optimizing and formatting the code)

With the right pieces in place now came the simple process of compositing. The first step was to randomly select one of the skins and load the separate parts of the skin along with the photo:

//randomly select a skin
Random r = new Random();
int skinNum = r.Next(1, 7);
string base_url = string.Concat("/TornPhotoDemo;component/images/skin", skinNum);

//load the different parts of the skin, using a helper method 
WriteableBitmap maskBmp = LoadBitmap(base_url + "/photo_mask.png");
WriteableBitmap textureBmp = LoadBitmap(base_url + "/photo_texture.jpg");
WriteableBitmap edges_maskBmp = LoadBitmap(base_url + "/photo_edges_mask.png");

//load the photo
WriteableBitmap bmp = LoadBitmap(base_url + "/photo.jpg");

Then using the extension method Blit and the new BlendMode, use “photo_mask.png” to mask the photo. Effectively replacing the alpha of each pixel in “photo.jpg” yet keeping the color data.

//mask the photo
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Then using the same Blit method and the other new Blend Mode, multiply the color values of the photo and the “photo_texture.jpg”.  This darkens the colors and adds the crumpled effect.

//apply the multiply effect to the photo with the texture image (3 times)
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);

For more wear and tear, a ripped edges bitmap is created using “photo_texture.jpg” as the base. A different mask image “photo_edges_mask.png” is used to then cut it down to a few edges.

//use the texture as the base for the torn edges
edgesBmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.None);
edgesBmp.Blit(cRect, edges_maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Now its time to use the AlphaBlend mode to then blit the edges bitmap and the crumpled photo bitmap together.  The photo mask is then run again to ensure the edges to run over the originally masked size.

//alpha blend the edges onto the mask
bmp.Blit(cRect, edgesBmp, cRect, WriteableBitmapExtensions.BlendMode.AlphaBlend);
//mask the photo again
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

And there you have it a randomly torn photo created dynamically in code. One of the things pointed out by Jesse is at the end of tutorial is the file sizes.  Saved off by itself the image above was 478k, individually the plain photo and the skin parts equal 104k. That’s 374k less memory and its dynamically generated. That’s kick-ass.

Thanks to Jesse for the concept and code and thanks to the WritableBitmapEx team for their work.

Download the TornPhotoDemo source

Run the live TornPhotoMaker lab