Image Manipulation using GDI+ - the Terminology:
Before understanding how to use GDI+ APIs for image manipulation, it is better to understand what GDI+ really is and what constitutes its vocabulary. If we consider basic image manipulation, there four points that need to be understood which are:
1. GDI+
2. Vector Graphics
3. Raster Graphics
4. Imaging
The second, third and fourth are integral part of image manipulation vocabulary. The fourth term in itself consists of many terms, some which would be discussed in this section.
1. GDI+:
By definition “GDI+ is a library that provides an interface that allows programmers to write Windows and Web graphics applications that interact with graphical devices such as printers, monitors, or files”. In essence, it provides a layer of abstraction over varied devices with which GUI needs to work. This abstraction works by converting the data into device compatible form. The device then turns the data into human readable form. The implementation of GDI+ is in the form of C++ classes that can be used from .Net environment. In .Net library, GDI+ classes are exposed through the System.Drawing and its namespaces.
2. Vector Graphics:
By definition “Graphics in which an image is stored as a series of numbers defining size, position, and shape”. In other words, in Vector graphics the image contains position vectors describing the image, where a vector represents both quantity and direction. For example, instead of containing a bit in a file for say a line being drawn, a vector graphics file describes a series of points to be connected. Also since the file contains vector commands, the size of the file becomes small.
3. Raster Graphics:
Raster is grid of x- and y- co-ordinates on a display space which, in this case is the display device. A Raster Graphics file contains information identifying which of these coordinates to illuminate using monochrome (black and white) or spectro-chrome (color) values. Raster images are also known as Bit-mapped images or Bitmaps because it contains information directly mapped to the display device’s grid. Due to this they have larger size than that of Vector Graphic files.
4. Imaging:
Imaging is the process of viewing and manipulating the images. In managed GDI+, imaging has two facets – Basic and Advanced. The processes in Basic covers loading and saving, zooming, scaling etc. whereas that in Advanced covers color palette, metafiles and tagged images. The basic functionalities are encapsulated in Image class. It provides methods to load, save and create images. The subclasses of Image class i.e. Bitmap and Metafile provides the functionality for displaying and manipulating the images.
That was a bird’s eye view of the recurring terms in the world of GDI+ and image manipulation. In the next section I will discuss about steps in loading and manipulating it using flipping as well as rotating the image.
Image Manipulation Using GDI+ - Step By Step:
Now lets have a look at steps at using the GDI+ for image manipulation. There are four main steps:
1. Overriding the Paint event of Form
2. Obtaining the Graphics object
3. Obtaining the Image object
4. Apply manipulation methods
First two steps is required whenever one has to work with GDI+. However, the last two comes into picture only when image manipulation has to be done. So here are the details:
1. Overriding the Paint event of form:
In .Net applications, drawing is done on a Form’s surface. This is same for both web applications as well as desktop application. The function where the actual drawing code can be hooked into is the Paint method. So, first step is to override this method to get foothold into the draw process within the application. This can be achieved either by supplying Paint handler to the Form’s paint method or by overriding OnPaint method. Though its better to provide Paint handler.
2. Obtaining the Graphics object:
The next step is to obtain the object of Graphics class. Because only through the Graphics object that the drawing methods can be called. To show an image it has to be drawn on to the Form. That can only be done using the DrawImage method of an object of Graphic class. An object of Graphics object is associated with a form. So it can be obtained by-
a. Using PaintEventArgs argument passed into the Paint handler
b. Using PaintArgs argument passed into the OnPaint method
c. Using CreateGraphics method of a Form.
The example of the first method would be thus:
private void form1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
}
where form1_Paint is the handler for Paint event of Form form1. The Graphics property of the PaintEventArgs returns a Graphics object associated with the Form object. The second way can be exemplified as :
protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
}
The main difference between first and second is that in the second way, the OnPaint method is overridden. The example for the third way would be :
Graphics g = this.CreateGraphics();
Where this refers to the Form in which this statement has been embedded. The CreateGraphics() method returns a method object of the Form. The only drawback of this approach is that the Graphics object would have to be disposed manually using dispose method of the Graphics object. I prefer the first method. Hence I would be using it henceforth.
3. Obtaining the Image object:
Image object can be obtained in three different ways using the static methods provided by Image class:
a. FromFile method returns an Image from the file specified as argument.
b. FromHbitmap creates and returns an Image object from a window handle to a
bitmap.
c. FromStream creates an Image object from a stream of bytes (in a file or a
database).
Among these, the first method is most commonly used if the image is available as a file, whereas the third method comes handy in web applications where the images would be stored as a column value of a table. The following statements creates an object of Image class using the first method:
Image curImage = Image.FromFile(“flower.bmp”);
4. Apply manipulation methods:
For the sole purpose of imaging, the Image class provides many methods. The most common in imaging are Flip and Rotate. The Image class provides for these by the following method – RotateFlip. The parameter to this method defines whether the flip as well as rotation both has to be done or only one of flip and rotation has to be applied. It also defines through what degrees flip or rotate has to be done. The following table provides most common arguments to the RotateFlip method as well as their description. The argument being passed are the members of RotateFlipType.
| | |
| Member | Description |
| Rotate180FlipNone | 180-degree rotation without flipping |
| Rotate180FlipX | 180-degree rotation with a horizontal flip |
| Rotate180FlipXY | 180-degree rotation with horizontal and vertical flips |
| Rotate180FlipY | 180-degree rotation with a vertical flip |
| Rotate270FlipNone | 270-degree rotation without flipping |
| Rotate270FlipX | 270-degree rotation with a horizontal flip |
| Rotate270FlipXY | 270-degree rotation with horizontal and vertical flips |
| Rotate270FlipY | 270-degree rotation with a vertical flip |
| Rotate90FlipNone | 90-degree rotation without flipping |
| Rotate90FlipX | 90-degree rotation with a horizontal flip |
| Rotate90FlipXY | 90-degree rotation with horizontal and vertical flips |
| Rotate90FlipY | 90-degree rotation with a vertical flip |
| RotateNoneFlipNone | No rotation and no flipping |
| RotateNoneFlipX | No rotation, with a horizontal flip |
| RotateNoneFlipXY | No rotation, with horizontal and vertical flips |
| RotateNoneFlipY | No rotation, with a vertical flip |
For example to flip and rotate an image through 90 degrees on both X- and Y- axes the statement would be:
curImage.RotateFlip(RotateFlipType.Rotate90FlipXY);
where curImage is an object of the type Image and the argument tells the RotateFlip method that the image has to be rotated through 90 degrees and need to be flipped both vertically and horizontally.
That brings us to the end of this section. In the next section I would develop an application that would load, flip and rotate the loaded image.
Image Manipulation – In the Real World:
Starting from this part onwards, I would be developing an image manipulation application using C# and GDI+. The basic version that would be developed now would provide the following features:
1. Load an image file
2. Rotate the loaded image 90 degrees
3. Flip the image along X- axis
First the menus have to be setup as shown in the figure below.
Fig1 – GDI_1.jpg
Fig2 - GDI_1_RotateFlip.jpg
The names of the menus are:
mnuLoad – the submenu that would show the Open dialog box and loads the file
mnu90rotate – rotates the image by 90 degrees.
mnuXfilp- flips the image along X-axis.
Here is the handler for loading the image:
private void mnuLoad_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();
}
The name of the file returned by the open file dialog is set as the current file name. then it is used to load the file using the FromFile function of the Image class. The returned image is assigned to the curImage variable which is of type Image and its scope is of class level. Next Inavlidate() method is called so that paint event is fired. Following the code, embedded in the Form’s Paint method handler, that actually draws the image:
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 );
}
}
The logic checks whether the current image is null or not. If not null, the DrawImage method of Graphic class is given the curImage as the Image to be loaded. The Graphic object is obtained from the Graphics property of PaintEventArgs object. Next the handler for rotating the image – it is embedded in the handler for the mnu90rotate menu item. Here is the code:
// Rotate 90 degrees
private void mnu90rotate_Click(object sender,
System.EventArgs e)
{
if(curImage != null)
{
curImage.RotateFlip(
RotateFlipType.Rotate90FlipNone);
Invalidate();
}
}
The image is rotated using the RotateFlip method of Image class. Since curImage is of Image class type, hence the method can be directly called on the Image object. Next it calls the Inavlidate() method to redraw the image.
Last comes the flip logic. It is embedded in the handler for the mnuXflip menu item.
// Flip X
private void mnuXflip_Click(object sender,
System.EventArgs e)
{
if(curImage != null)
{
curImage.RotateFlip(
RotateFlipType.RotateNoneFlipX);
Invalidate();
}
}
That’s all for the example. This sets up the stage for image manipulation using GDI+ in C#. However certain aspects of the problem of image manipulation have been left out including saving the image and how GDI+ works. These will be the topics that will be tackled in the next part of this series. Till then…
Note: You can find the article on: http://www.aspfree.com/c/a/C-Sharp/Basic-Image-Manipulation-using-GDI-and-C/
