Saving images (.bmp, .png, etc) in WPF/Silverlight

I’ve recently added a new feature to Live Geometry that allows users to save the current drawing as a bitmap or a .png file. Just push the save button and pick the desired image format in the Save dialog:

Fortunately, both WPF and Silverlight support saving full visual contents of any visual into a file on disk. However the approach is somewhat different.

WPF can save any Visual to an image and it supports several formats out of the box via a concept of Encoders. Here’s a sample for .bmp and .png:

 void SaveToBmp(FrameworkElement visual, string fileName)
{
    var encoder = new BmpBitmapEncoder();
    SaveUsingEncoder(visual, fileName, encoder);
}

void SaveToPng(FrameworkElement visual, string fileName)
{
    var encoder = new PngBitmapEncoder();
    SaveUsingEncoder(visual, fileName, encoder);
}

void SaveUsingEncoder(FrameworkElement visual, string fileName, BitmapEncoder encoder)
{
    RenderTargetBitmap bitmap = new RenderTargetBitmap(
        (int)visual.ActualWidth,
        (int)visual.ActualHeight,
        96,
        96,
        PixelFormats.Pbgra32);
    bitmap.Render(visual);
    BitmapFrame frame = BitmapFrame.Create(bitmap);
    encoder.Frames.Add(frame);

    using (var stream = File.Create(fileName))
    {
        encoder.Save(stream);
    }
}

These types are all in System.Windows.Media.Imaging.

In Silverlight, the encoders don’t come as part of the Silverlight runtime – but fortunately there is a project on CodePlex called ImageTools (https://imagetools.codeplex.com) that provides necessary support. You will need to download the following binaries and add them as references to your Silverlight project:

• ICSharpCode.SharpZipLib.Silverlight
• ImageTools
• ImageTools.IO
• ImageTools.IO.Png (only if you want .png support)
• ImageTools.IO.Bmp (only if you want .bmp support)
• ImageTools.Utils

After that, you can call the ToImage() extension method on any Canvas:

 void SaveAsPng(Canvas canvas, SaveFileDialog dialog)
{
    SaveToImage(canvas, dialog, new PngEncoder());
}

void SaveAsBmp(Canvas canvas, SaveFileDialog dialog)
{
    SaveToImage(canvas, dialog, new BmpEncoder());
}

void SaveToImage(Canvas canvas, SaveFileDialog dialog, IImageEncoder encoder)
{
    using (var stream = dialog.OpenFile())
    {
        var image = canvas.ToImage();
        encoder.Encode(image, stream);
    }
}

Since you can’t write to disk directly in Silverlight, you can pass a SaveFileDialog and use its stream, or you can obtain a stream elsewhere and pass that. The ToImage() extension method does the dirty work that we had to do ourselves in WPF.

Big thanks to https://imagetools.codeplex.com for their awesome library and encoders!

• Anonymous
  October 12, 2009
  The comment has been removed

• Anonymous
  December 09, 2009
  canvas.ToImage(); do not contain defindion ToImage(); Please help me?

• Anonymous
  January 20, 2010
  canvas.ToImage(); do not contain defindion ToImage(); I m having same issue any help ?

• Anonymous
  February 07, 2010
  for those with the problems with the extension method. Add this to the top of your page: using ImageTools;

• Anonymous
  November 22, 2010
  HI i saved image only what i am seen in the View, if my Image is big and scrol bars came that part is not saved.. also more than300*3000 also not able to create image .. if this thing solved it is perfect to use. Thanks

• Anonymous
  November 22, 2010
  My Email id is muruganas81@gmail.com  pls replay my comment if u need more info  pls ask me

• Anonymous
  May 31, 2012
  How we can save the image in isolated storage and display in image control with silverlight . Pleas help me . I have an issue I can show the ashx image in silverlight apps but when its xap use in windows .vb apps image is not going to work its not showing  what is issue I could not understand how can I short out this one please hwlp me

• Anonymous
  May 31, 2012
  How can I download the image like "http://../../Handler.ashx?winnerId=27" and save in local folder in silverlight , I have used so many way but I couldn't get any right solution so that this image display in .net windows application.

• Anonymous
  July 05, 2012
  if i have a Image instance, not files provided by OpenFileDialog, do you have solutions to save this Image instance to server drives.

• Anonymous
  November 07, 2013
  Nice one. Cheers.