In the last part I gave you a bird’s eye view of what GDI+ is and how to setup application for using GDI+. However, without knowing about the facilitator i.e. GDI+, going forward would be counter-productive. Hence, in this part, along with different image manipulation techniques, the focus would be on the essentials of GDI+. In the first section, I would discuss about GDI+ in brief including the differences it has with its predecessor that is GDI. Second section would focus on the manipulation techniques such as zooming, creating thumbnails. In the third section, I would extend the application created in last part to include the techniques introduced in this discussion. That is the outline of this discussion.
More About GDI+:
GDI+ essentially refers to the library that helps developers to interact with various devices such as Monitors, Printers etc. having graphical capabilities without going into low-level details of these devices. The essence of GUI is that it can interact with peripherals such as Monitors and presents data in human readable form. However, from the point of view of a developer, if he or she had to directly interact with these devices, then such a task would have been monumental. This is where GDI+ comes into picture. It acts as a conduit and a translator for the data being passed between devices and applications. Even controlling the command line terminals also comes under GDI+. It does everything from printing a ‘Hello World’ program on the console to drawing lines, rectangles etc and printing a form. Pictorially it can be shown thus:
Fig 1- GDI2_1.jpg
The next question that arises is how does GDI+ works? To make it clear as a crystal, lets have a look at an example of drawing a line. A line, in essence, is a sequence of pixels from starting location (X0, Y0) to an ending location (Xn, Yn). To draw such a line the devices i.e. monitor in this case, need to know the device coordinate or physical coordinates. However, instead of directly telling the device, the call is made to the drawLine() method of GDI+, and GDI+ draws the line from point A to point B in the memory also known as video memory. GDI+ reads the point A and point B locations, converts them to a sequence of pixels, and tells the monitor to display the sequence of pixels. In short GDI+ converts device independent calls to device understandable form and vice-versa. So that’s an overview of how GDI+ works. Lets now move onto topic of manipulation of image.
Image Manipulation – Thumbnail, zooming and saving:
In the last part, I discussed simple manipulations such as flipping and rotating. Lets tackle something a bit more complex in concept if not in implementation. They are:
1. Creating thumbnails
2. Zooming a loaded image
3. Saving a manipulated image
Of these first two strictly comes under the category of image manipulation whereas the last is a generic image based operation in the lines of file operation.
1. Creating Thumbnails:
Thumbnails are reduced version of images. The dimensions of a thumbnail image are typically of 80 to 200 pixels in length. In GDI+, thumbnail of an image can be created by GetThumbnailImage() of Image class. It takes four parameters- the first parameter corresponds to the width and second parameter is for the height of the thumbnail to be generated, the third parameter is Image.GetThumbnailImageAbort which needs to be passed for compatibility though not being used in current version. The fourth parameter, likewise is not used, yet need to be passed for compatibility. The fourth parameter must be IntPtr.Zero. If the first two parameters that is width and height are 0, then GDI+ returns embedded thumbnail (some images contains thumbnails embedded into them. Otherwise the thumbnail is created using system defined dimensions. For example if img is an instance of Image class and the width, height to be used is system defined, the statement to create a thumbnail would be:
Image thumbNailImage = img.GetThumbnailImage(0, 0, tnCallBack, IntPtr.Zero);
Where thumbNailImage contains the returned thumbnail, the tnCallback is a function corresponding to Image.GetThumbnailImageAbort which is defined as:
// Must be called, but not used
public bool tnCallbackMethod()
{
return false;
}
2. Zooming a loaded image:
Zooming is the process of enlarging an image by multiplying it with a number called zoom-factor. By definition, “The zoom factor is the ratio of the current size of the image to the desired new size of the image”. That means by dividing the current size of the image with desired size of the image we get the zoom factor. For example, to zoom in on an image by 200%, the current size must be multiplied by 200% or by 2 (200%= 200/100=2). To zoom out an image by 25 percent, the size must be multiplied by 25 percent, or 0.25 (25/100 = 0.25 times). It is one of those areas of image manipulation where GDI+ doesn’t provide methods to achieve the result.
3. Saving a manipulated image:
Saving an image is one of the primary operations done on an image. While saving an image, the type into which the image has to be saved or in other words the extension of the image plays a major role. Each type corresponds to a particular format. In essence, while saving an image writing out the data according to the format is necessary. However, since the API that is being used is GDI+, a single call to Save() method of Image class abstracts out all the details about writing out according to the format. It takes two parameters – the name as which the image is to be saved and the format into which the image has to be saved. The format can be specified using the types provided by ImageFormat class. Following table specifies the various formats supported by GDI+:
-
Property
Description
Bmp Specifies BMP format. Emf Specifies EMF (Enhanced Metafile Format). Exif Specifies EXIF format. Gif Specifies GIF format. Guid Specifies a GUID structure that represents the ImageFormat object. Icon Specifies Windows icon format. Jpeg Specifies JPEG format. MemoryBmp Specifies memory bitmap format. Png Specifies PNG format. Tiff Specifies TIFF format. Wmf Specifies WMF (Windows Metafile Format
Of these Emf and Wmf are specific to windows. I will be discussing about these, in detail, in future.
For example to save the image with the name “checker.gif” in GIF format, the statement would be:
curImage.Save(“checker.gif”, ImageFormat.Gif);
where curImage is the instance of Image class.
That brings us to the end of this section. In the next section, I would be extending the application developed in the first part by embedding the operations discussed in this section.
Image Manipulation – In the Real World:
It is time to put the theory into practice. I would be doing it by enhancing the application developed in the last part by providing the following functionalities:
1. Save the image in the format specified by user
2. Zoom-in according to the percentage selected from the menu
3. Create thumbnail of a loaded image
The menus corresponding to the operations are:
mnuSave – the submenu of File menu to save the image
mnu200Zoom – zooms the image by 200%.
mnuThumbNail- creates a thumbnail of the image.
Here is the method that handles click event of mnuSave
private void mnuSave_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;
}
}
}
First save dialog box is shown with acceptable extensions. Then from the file name returned by the dialog box the extension is retrieved and according to the extension Save() method is called with corresponding image format parameter.
Next comes the handler for mnu200Zoom. But before that certain things have to be done. First add the following line to the class at the application level:
private double curZoom = 1.0;
Then the mnuLoad (from previous part) has to be changed slightly. The added code is shown in bold:
private void mnuLoad_Click(object sender,
System.EventArgs e)
{
//Change the AutoScrollMinSize property
this.AutoScrollMinSize = new Size
((int)(curImage.Width * curZoom),
(int)(curImage.Height * curZoom));
// 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();
}
What the added code does is that it multiples the image width and height with zoom factor to render an image with appropriate zoom setting. Next the paint event handler has to be changed. The DrawImage() method has to be changed into the following:
g.DrawImage(curImage, new Rectangle
(this.AutoScrollPosition.X,
this.AutoScrollPosition.Y,
(int)(curRect.Width * curZoom),
(int)(curRect.Height * curZoom)));
The image should have the height and width according to the zoom factor. For that the current width and height is multiplied with the current zoom factor represented by curZoom variable. Last step in zooming is the event handler for mnu200Zoom:
private void mnu200_Click(object sender,
System.EventArgs e)
{
if(curImage != null)
{
curZoom = (double)200/100;
Invalidate();
}
}
Lastly comes the event handler for the mnuThumbNail:
private void mnuThumbNail_Click(object sender,
System.EventArgs e)
{
if(curImage != null)
{
// Callback
Image.GetThumbnailImageAbort tnCallBack =
new Image.GetThumbnailImageAbort(tnCallbackMethod);
// Get the thumbnail image
Image thumbNailImage = curImage.GetThumbnailImage
(100, 100, tnCallBack, IntPtr.Zero);
// Create a Graphics object
Graphics tmpg = this.CreateGraphics();
tmpg.Clear(this.BackColor);
// Draw thumbnail image
tmpg.DrawImage(thumbNailImage, 40, 20);
// Dispose of Graphics object
tmpg.Dispose();
}
}
// Must be called, but not used
public bool tnCallbackMethod()
{
return false;
}
It first creates a variable of type GetThumbnailImageAbort and assign the tnCallbackMethod() to it by passing the method to the GetThumbnailImageAbort. Then it creates a new instance of Image class to hold the image returned by the GetThumbnailImage method, which is then used to draw the thumbnail onto the screen.
This brings us to the end of this discussion. In this part I discussed more advanced features of GDI+. I will continue along the same lines in next part. Till then…
