Home and Learn: Intermediate Programming
Save the Image
Stick Figure App - Wrapping up
Now that we're able to draw on our white canvas, it would be a good option to be able to save the image. We'll do that now.
Add a SaveFileDialog control to your Form1. Change the Name property to SaveDB. Previously, we've used code to set the Initial Directory for our Save dialog boxes. But you can set them in the properties area.
Make sure your SaveDB item is selected at the bottom of the screen. Locate the InitialDirectory property. Set it to this:
Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)
Now locate the DefaultExt property. Set it to png.
Locate the Filter property and set it to Png|*.png.
Once you've set the properties, you Property area will look like this:
Now double click your Save Image button to create a code stub.
Because you've already set the initial directory, the filter and the default file extension, you don't to set these with code. You can just get on and display the dialog box.
With that in mind, add this If statement in VB Net.
If SaveDB.ShowDialog() <> DialogResult.Cancel Then
End If
And this if statement in C#:
if (SaveDB.ShowDialog() == DialogResult.OK)
{
}
Inside of the If statement, first get the file name and path from the Save dialog box:
VB Net
Dim savePath As String = SaveDB.FileName
C#:
string savePath = SaveDB.FileName;
We're going to be creating a Bitmap and turning it into a PNG image file. To create the Bitmap, add this line in VB Net:
Dim bmpImage As Bitmap = New Bitmap(bitmapObject)
And add this one in C#:
Bitmap bmpImage = new Bitmap(bitmapObject);
Notice what's in the round brackets of Bitmap - our bitmapObject. This is what we've been drawing on. We create a new Bitmap from this. Essentially, we're copying it into a new Bitmap called bmpImage.
Now we can issue the Save command of Bitmaps. Add this line in VB Net:
bmpImage.Save(savePath, Imaging.ImageFormat.Png)
And here's the line in C#:
bmpImage.Save(savePath, System.Drawing.Imaging.ImageFormat.Png);
You could add Imports System.Drawing.Imaging to the top of your code in VB Net, or using System.Drawing.Imaging in C#. Then you could just write this (with a semicolon on the end in C#):
bmpImage.Save(savePath, ImageFormat.Png)
But the line will save the Picture Box image to the location specified between the round brackets of Save. The image will be saved in the PNG format.
Finally, you can Dispose of the new bitmap object with this line (again, semicolon on the end in C#):
bmpImage.Dispose()
Your Save button code should look like this in VB Net:
And here's the code in C#:
You can give it a try. Draw something on your white canvas. Click your Save button and it should work fine. You can view the image in a drawing package like Paint. Or add it to a web page. Because it's a PNG file, it will have a transparent background - ideal for the web.
In the next lesson, we'll do the Clear button
