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.

WriteableBitmapEx

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");

photo loaded

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);

photo masked

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);

photo multiplied with texture 3 times

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);

edges created

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);

photo blended with edges

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

This entry was posted in Client Technologies, Tutorials and tagged , , , , , . Bookmark the permalink.

18 Responses to Image Blitting in Silverlight with WriteableBitmapEx

  1. It’s amazing how close this looks to the one I made with Flash. Looks like there is a lot of power with the bitmap manipulation in Sliverlight and looking forward to doing more collaboration in the future. Keep up the good work!

  2. Pingback: Dew Drop – January 10, 2009 | Alvin Ashcraft's Morning Dew

  3. Denny Figuerres says:

    Sweet! Silverlight is great and if the devs at microsoft keep going we will have to use it to replace the desktop .Net in a few more years :-)

    just get hisname@microsoft.com to write a few more features !

    C9

  4. Rene Schulte says:

    That’s really a great effect.

  5. Mike Stokes says:

    Great article on exploring something new that hasn’t really had the light shone on it yet Adam. I love seeing short to the point posts on a specific feature/capability like this – more please he he :)

  6. Pingback: Links (1/10/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  7. Pingback: Blitting images and the creativity of others | Silverlight Games 101

  8. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #514

  9. Pingback: Daily tech links for .net and related technologies « .Net Knowledge Base

  10. Pingback: links for 2010-01-11 « dstelow notes…

  11. Pingback: joongs14's me2DAY

  12. Pingback: Daily tech links for .net and related technologies - Jan 10-12, 2010 - Sanjeev Agarwal

  13. Pingback: Tune Up Your PC » Post Topic » Создание мятых изображений

  14. Nicco says:

    Hi nice blog, can you get the source code back online?

  15. Adam Kinney says:

    The download link has been updated, thanks for the notice!

  16. Pingback: » Advanced Animation: Bringing InfoGraphics to Life Think. Create. Deliver

  17. Pingback: » Advanced Animation: Bringing InfoGraphics to Life Clarity Blogs

  18. Jeff says:

    Hi Adam, thanks so much for posting this. It helped me a ton today.

Leave a Reply