Working with Images

Before we write any imaging code, let's explore the .NET Framework library and see what kind of imaging support it offers. The Bitmap class provides functionality to work with raster images, and the Metafile class provides functionality to work with vector images. Both classes are inherited from the Image class. In this chapter we will discuss the Image and Bitmap classes and their members. The Metafile class will be discussed in Chapter 8.

We'll start this discussion with the Image class, which is defined in the System.Drawing namespace. Understanding this class is important because we will be using its members in our samples throughout this chapter and the next.

The Image class is an abstract base class for the Bitmap, Metafile, and Icon classes. Some common Image class properties (all read-only) are described in Table 7.2.

Besides the properties discussed in Table 7.2, the Image class provides methods, which are described in Table 7.3.

7.2.1 An Image Viewer Application

Now we will write an application that will use some of the properties and methods of the Image class. You will learn how to open, view, manipulate, and save images. The application is a simple image viewer.

To begin:

1. Use Visual Studio .NET to create a Windows application project called ImageViewer.
2. Add a MainMenu control and some menu items to the form.
3. Change the text of the menu items to File, Open File, Save File, and Exit, and the name of these menu items to FileMenu, OpenFileMenu, SaveFileMenu, and ExitMenu, respectively. The final form looks like Figure 7.3.

   Figure 7.3. A simple image viewer application

4. Write menu click event handlers for the OpenFileMenu, SaveFileMenu, and ExitMenu items by simply double-clicking on them.

The OpenFileMenu click event handler will allow us to browse and select one image and display it, the SaveFileMenu click event handler will save the image as a new file name, and the ExitMenu click event handler will simply close the application.

Before we write code for these menu event handlers, let's see how to create an Image object from a file and how to display it using the DrawImage method of the Graphics class.

7.2.2 Creating an Image Object

The Image class provides three static methods to create an Image object: FromFile, FromHbitmap, and FromStream.

1. FromFile creates an Image object from a file.
2. FromHbitmap creates an Image object from a window handle to a bitmap.
3. FromStream creates an Image object from a stream of bytes (in a file or a database).

For example, in the following line, FromFile constructs an Image object. Here curFileName is a string variable that holds the file name:

Image curImage = Image.FromFile(curFileName);

We will see how to create Image objects from streams and bitmaps in later chapters.

7.2.3 Drawing an Image

After creating an Image object, you'll want to view the image. GDI+ and Windows Forms offer many ways to view images. You can use a Form, PictureBox, or Button control as a container to view images. In most of our samples, we will draw an image on a graphics surface (a form).

Tip

You can also use a picture box to view images. The PictureBox control is easy to use, but using a form as a viewer provides more control and flexibility. For instance, use a PictureBox control when you do not need to manipulate or resize images. If you need to manipulate images using operations such as zooming in and zooming out, scaling, and skewing, use a Form object as the container because it is easy to change the size of Form. Later in this chapter you will see how to use a picture box to draw images.

As we saw in Chapter 3, the DrawImage method of the Graphics class is used to draw an image. It has 30 overloaded forms. The simplest form of DrawImage takes an Image object and the starting point where it will be drawn. You can also specify the area of a rectangle in which the image will be drawn. GraphicsUnit and ImageAttributes are optional parameters, which we will discuss later in this chapter.

The following code snippet creates an Image object from a file, and draws the image using the DrawImage method. The starting point of the image is (10, 10). You can put this code on the form's paint event handler.

Graphics g = e.Graphics; Image curImage = Image.FromFile(curFileName); g.DrawImage(curImage, 10, 10);

The following code will fit an image into a rectangle that starts at point (10, 10) and has a width of 100 and a height of 100.

Graphics g = e.Graphics; Image curImage = Image.FromFile(curFileName); Rectangle rect = new Rectangle(20, 20, 100, 100); g.DrawImage(curImage, rect);

If you want to fill the entire form with an image, you can use the ClientRectangle property of the form as the default rectangle.

Graphics g = e.Graphics; Image curImage = Image.FromFile(curFileName); g.DrawImage(curImage, this.ClientRectangle);

Before we write code for the menu items event handler, we define string and Image type variables in the application scope. Add the following at the beginning of the class:

// User-defined variables private string curFileName = null; private Image curImage = null;

Listing 7.1 shows the code for the OpenFileMenu click event handler. We use OpenFileDialog to browse images and save the file name in the string variable after the user selects a file. Thus we create an Image object from the selected file by using Image.FromFile. We also call Invalidate, which forces the form to repaint and call the paint event handler, where we will be viewing the image.

Listing 7.1 The OpenFileMenu click event handler

private void OpenFileMenu_Click(object sender, System.EventArgs e) { // Create OpenFileDialog OpenFileDialog opnDlg = new OpenFileDialog(); // Set a filter for images opnDlg.Filter = "All Image files|*.bmp;*.gif;*.jpg;*.ico;"+ "*.emf;,*.wmf|Bitmap Files(*.bmp;*.gif;*.jpg;"+ "*.ico)|*.bmp;*.gif;*.jpg;*.ico|"+ "Meta Files(*.emf;*.wmf;*.png)|*.emf;*.wmf;*.png"; opnDlg.Title = "ImageViewer: Open Image File"; opnDlg.ShowHelp = true; // If OK, selected if(opnDlg.ShowDialog() == DialogResult.OK) { // Read current selected file name curFileName = opnDlg.FileName; // Create the Image object using // Image.FromFile try { curImage = Image.FromFile(curFileName); } catch(Exception exp) { MessageBox.Show(exp.Message); } } // Repaint the form, which forces the paint // event handler Invalidate(); }

Now we write the Graphics.DrawImage method on the form's paint event handler. You can write a paint event handler from the Properties window of the form by double-clicking on the paint event available in the events list. Listing 7.2 shows our code, which simply calls DrawImage, using the default rectangle coordinates as AutoScrollPosition, and the image's width and height.

Listing 7.2 The paint event handler of the form

private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { Graphics g = e.Graphics; if(curImage != null) { // Draw image using the DrawImage method g.DrawImage(curImage, AutoScrollPosition.X, AutoScrollPosition.Y, curImage.Width, curImage.Height ); } }

Now we're ready to view images. Compile and run the application, use the Open File menu item to select an image file, and the program will view it. In Figure 7.4, we open a file called 031.jpg.

Figure 7.4. Browsing a file

Clicking the Open button brings up the file for viewing, as shown in Figure 7.5.

Figure 7.5. Viewing an image

7.2.4 Saving Images

Now we move to the Save File menu item. It allows you to save images in different file formats.

The Image class provides the Save method, which is used to save images to a specified format. The Save method takes a file name (as string type) or a stream (a Stream object), and a specified format of type ImageFormat class. Table 7.4 describes the properties of the ImageFormat class.

Note

The Emf and Wmf properties in the ImageFormat enumeration do not save a real metafile, but save the bitmap as one metafile record. It will still be a bitmap.

Now we add code for the SaveFileMenu click event handler, as shown in Listing 7.3. We use SaveFileDialog, which lets us specify the file name and saves an image using the format specified in the dialog. We read the extension of the file name entered by the user, and on that basis we pass the ImageFormat property in the Save method.

Note

The ImageFormat enumeration is defined in the System.Drawing.Imaging namespace. Don't forget to add a reference to this namespace in your application.

Listing 7.3 Using the Save method to save images

private void SaveFileMenu_Click(object sender, System.EventArgs e) { // If image is created if(curImage == null) return; // Call SaveFileDialog SaveFileDialog saveDlg = new SaveFileDialog(); saveDlg.Title = "Save Image As"; saveDlg.OverwritePrompt = true; saveDlg.CheckPathExists = true; saveDlg.Filter = "Bitmap File(*.bmp)|*.bmp|" + "Gif File(*.gif)|*.gif|" + "JPEG File(*.jpg)|*.jpg|" + "PNG File(*.png)|*.png" ; saveDlg.ShowHelp = true; // If selected, save if(saveDlg.ShowDialog() == DialogResult.OK) { // Get the user-selected file name string fileName = saveDlg.FileName; // Get the extension string strFilExtn = fileName.Remove(0, fileName.Length - 3); // Save file switch(strFilExtn) { case "bmp": curImage.Save(fileName, ImageFormat.Bmp); break; case "jpg": curImage.Save(fileName, ImageFormat.Jpeg); break; case "gif": curImage.Save(fileName, ImageFormat.Gif); break; case "tif": curImage.Save(fileName, ImageFormat.Tiff); break; case "png": curImage.Save(fileName, ImageFormat.Png); break; default: break; } } }

Now we write code for the ExitMenu click event handler. This menu simply closes the application. Hence we call the Form.Close method on this event handler, as shown in Listing 7.4.

Listing 7.4 The ExitMenu click event handler

private void ExitMenu_Click(object sender, System.EventArgs e) { this.Close(); }

7.2.5 Retrieving Image Properties

Table 7.2 listed the Image class properties. Now we will read and display the properties of an image. We add a Properties menu item to the main menu and write the code in Listing 7.5 as this menu click event handler. We read the size, format, resolution, and pixel format of an image.

Listing 7.5 Getting image properties

private void PropertiesMenu_Click(object sender, System.EventArgs e) { if(curImage != null) { // Viewing image properties string imageProperties = "Size:"+ curImage.Size; imageProperties += ", RawFormat:"+ curImage.RawFormat.ToString(); imageProperties += ", Vertical Resolution:" + curImage.VerticalResolution.ToString(); imageProperties += ", Horizontal Resolution:" + curImage.HorizontalResolution.ToString(); imageProperties += ", PixelFormat:"+ curImage.PixelFormat.ToString(); MessageBox.Show(imageProperties); } }

Figure 7.6 shows the properties of an image.

Figure 7.6. Reading the properties of an image