Write the content of a canvas to a file

To write the content of a canvas to a file you need the following Assemblies:
  • ImageTools
  • ImageTools.Util
  • ImageTools.IO.Png
The png format is the default format in the image tools library. Therefore all extension methods use the png encoder.

1. Save the image as png file

To create a out image out of an canvas just use the following code:
ExtendedImage myImage = MyCanvas.ToImage();

Then use the SaveFileDialog to write the image to a file:
SaveFileDialog dialog = new SaveFileDialog();

dialog .Filter = "Image Files (*.png)|*.png";

if (dialog .ShowDialog() == true)
{
   using (Stream stream = dialog .OpenFile())
   {
      myImage.WriteToStream(stream);
   }
}

2. Choose a image encoder.

If you want to save the file as jpg add a reference to the ImageTools.IO.Jpeg assembly and use the JpegEncoder:
SaveFileDialog dialog = new SaveFileDialog();

dialog .Filter = "Image Files (*.png)|*.png";

if (dialog .ShowDialog() == true)
{
   using (Stream stream = dialog .OpenFile())
   {
      JpegEncoder encoder = new JpegEncoder();
      encoder.Encode(myImage, stream);
      
      stream.Close();
   }
} 

3. Save the image to the different formats

The library also provides a method which select the encoder by the file extension. If you want to support other formats than png you must register the encoders before:
ImageTools.IO.Encoders.AddEncoder<ImageTools.IO.Jpeg.JpegEncoder>();
ImageTools.IO.Encoders.AddEncoder<ImageTools.IO.Bmp.BmpEncoder>();

The code to write the image to the stream is more or less the same. Just set the target file name to give the method the possibility to select the encoder.
SaveFileDialog dialog = new SaveFileDialog();

dialog .Filter = "Image Files (*.png)|*.png";

if (dialog .ShowDialog() == true)
{
   using (Stream stream = dialog.OpenFile())
   {
      myImage.WriteToStream(stream, dialog.SafeFileName);
   }
}

Last edited Jan 4, 2012 at 5:33 AM by malignate88, version 7

Comments

JuanPieterse May 13, 2014 at 11:48 AM 
Thank you very much for this piece of work. I use it to make a screenshot in Silverlight 5 and save to to PNG format image, and it works great!

I did the following in my silverlight progect:

Added references to your DLLs:

ImageTools
ImageTools.IO.Png
ImageTools.Utils

Code in user control:

using ImageTools;

private void Button_Click_1(object sender, RoutedEventArgs e)
{
var screenShot = new WriteableBitmap((int)this.LayoutRoot.ActualWidth, (int)this.LayoutRoot.ActualHeight);
screenShot.Render(this.LayoutRoot, null);
screenShot.Invalidate();

var saveDialog = new SaveFileDialog();
saveDialog.Filter = "PNG (*.png)|*.png";

if (saveDialog.ShowDialog() == true)
{
var saveImage = screenShot.ToImage();

using (var stream = saveDialog.OpenFile())
{
saveImage.WriteToStream(stream, saveDialog.SafeFileName);
}
}
}

vinaytejareddy Jan 9, 2014 at 10:49 AM 
how to pass the image to a WCF method as a parameter ?

billyj82 Mar 13, 2012 at 8:17 PM 
How do I save without using the save file dialog? I am trying to have it automatically save directly to a picture folder I designate and I can not seem to find a way to save. Basically as soon as you click save you are not prompted for a location, it will just use an incremental number as the filename and save directly to file.

ggshi Dec 16, 2011 at 3:21 AM 
My silverlight control contains images from another server. Therefore, it always give me messages like this: WriteableBitmap has protected content. Pixel access is not allowed.
All I want is a screen snapshot of Silverlight portion.
Any suggesions?
thanks in advance.

prashkp Nov 11, 2011 at 10:24 PM 
It definitely has to be updated! Also is there any active community on this??

I am trying to do the following and it seems like there is absolutely no way to do it unless we show a dialog box!! Alas as problems are problems, I cannot show a dialog box for the functionality I am trying to achieve.

I have 50 WriteableBitmaps. I want to bring them back up, if the user requests. I am not saving them on the harddrive, but have to store them within the browser using a list in the code or something. Storing them as WriteableBitmaps is increasing the memory usage pretty bad for the browser process. What I am trying to do is to do some JPEG or PNG codec'ing and save JPEGs or PNGs instead of WriteableBitmaps. If I use the above code, I have to create an object of Stream. But I cannot, since Stream is an abstract class. But if I create a reader or a writer, then the Encode and Decode methods don't agree!
Is there any way I can do this??

Thanks!!

omda Jun 28, 2011 at 8:28 AM 
Try this
References:
ImageTools
ImageTools.IO.Bmp
ImageTools.IO.Jpeg
ImageTools.IO.Png
ImageTools.Utils

------------------------------------
using ImageTools.IO;
using ImageTools.IO.Bmp;
using ImageTools;

---------------------------------
Constructor:
Encoders.AddEncoder<ImageTools.IO.Bmp.BmpEncoder>();
Encoders.AddEncoder<ImageTools.IO.Jpeg.JpegEncoder>();
Encoders.AddEncoder<ImageTools.IO.Png.PngEncoder>();

----------------------------
void SavePlotAsFileMenuItem_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog saveDialog = new SaveFileDialog();
saveDialog.Filter = "BMP (*.bmp)|*.bmp|JPEG (*.jpeg)|*.jpeg|PNG (*.png)|*.png";
if (saveDialog.ShowDialog() == true)
{
WriteableBitmap wb = new WriteableBitmap(thePlot, null);
ExtendedImage myImage = ImageExtensions.ToImage(wb);

using (Stream stream = saveDialog.OpenFile())
{
myImage.WriteToStream(stream, saveDialog.SafeFileName);
}
}
}

grabah May 17, 2011 at 10:26 AM 
and btw there is also no such thing as ImageTools class in ImageTools dll.

grabah May 17, 2011 at 10:26 AM 
hmm.. How do you create image with this?!

ImageTools myImage = MyCanvas.ToImage();
there is no such thing as ToImage() function in Canvas!!

angelo34jj Jan 19, 2011 at 4:14 AM 
Guys.. do you have any sample project on this?

Thanks

djclinton Dec 18, 2010 at 10:25 PM 
I've got it working using this....

ImageTools.IO.Encoders.AddEncoder<ImageTools.IO.Bmp.BmpEncoder>();


ExtendedImage myImage = MultiSquareLayout.ToImage();


SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "Image Files (*.bmp)|*.bmp";

if (sfd.ShowDialog() == true)
{
using (Stream stream = sfd.OpenFile())
{
myImage.WriteToStream(stream);
}
}

djclinton Dec 18, 2010 at 10:14 PM 
Hey there, I've tried this, however the reference for ImageTools.Util is now .Utils and this example does not work.

It can do with some updating.