Working with Images in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

In viewing and manipulating images, GDI+ provides significant improvements over it predecessor, GDI. In this article we will discuss the following topics:

Basic imaging-related classes defined in the .NET Framework library
The difference between raster and vector images
The Image class, its properties, and its methods
Writing an image viewer application
Opening and viewing images
Retrieving image properties
Creating thumbnails
Rotating and flipping images
Zooming in and out on images
Saving and skewing images
Changing the resolution and scaling of images
Playing animated images
The Bitmap class, its properties, and its methods
Using the Icon class to work with icons
Drawing transparent images
Using the PictureBox control to draw images.

As we said earlier, the graphics-related functionality in the .NET Framework class library is defined in the System.Drawing namespace and its helper namespaces. The imaging functionality is divided into two categories by separation into two namespaces. Basic imaging functionality is defined in the System.Drawing namespace; advanced imaging functionality is defined in the System.Drawing.Imaging namespace.

Raster and Vector Images

The graphics world divides images into two types: raster and vector.

A raster image (also called bitmap) is a collection of one or more pixels. Each pixel of the image can be controlled individually, which means that each pixel of the image can have a different color or shade. In a raster image that contains a line and a rectangle, the line and rectangle is each a sequence of pixels. Raster images require higher resolutions and antialiasing for a smooth appearance and are best suited for photographs and images with shading.

A vector image is a collection of one or more vectors. Mathematically, a vector is a combination of a magnitude and direction, which can be used to represent the relationships between points, lines, curves, and filled areas. In vector images, a vector is the entity to be controlled. Each vector can have a separate color or shade. So a vector image with a line and a rectangle is set of vectors in which each vector has different properties, such as color or shade. Vector graphics are mathematically described and appear smooth at any size or resolution, and they are often used by mechanical and architectural engineers.

Vector images can be transformed from one state to another without any loss of data. Transforming raster images, however, may cause data loss or reduce the quality of images. For example, in the zoomed raster image shown in Figure 7.1, the boundary of the image is blurry.

In the zoomed vector image of Figure 7.2, however, the outer boundary of the image is sharper.

Figure 7.1.gif

FIGURE 7.1: A zoomed raster image

Figure 7.2.gif

FIGURE 7.2: A zoomed vector image

Raster Image Formats

A bitmap is usually stored in an array of bits that specify the color of each pixel in a rectangular array of pixels. The bitmap's height and width are measure in pixels. The number of bits per pixel specifies the number of colors that can be assigned to that pixel, according to the equation

N_c = 2^Bp

Where

N_c = the number of colors that each pixel can display
Bp = the number of bits per pixel

For example, if Bp = 8, the Nc = 2⁸ = 256 colors. If Bp =24, then Nc =2²⁴ = 16,777,216 colors. Table 7.1 shows the number of bits and number of possible colors that can be assigned to a pixel.

Bitmap with 1 bit per pixel are called monochrome images. Monochrome images generally store two colors: black and white.

Graphics File Formats

There are many bitmap image formats, including the following:

BMP
GIF
JPEG
EXIF
PNG
TIFF

BMP

BMP is a standard Windows format to store device-independent and application-independent bitmap images. The number of bits per pixel (1, 4, 8, 16, 24, or 64) for a given BMP file is specified in a file header. BMP files with 24 bits per pixel are common.

TABLE 7.1: Number of bits and possible number of colors per pixel.

Bits	Colors
1	2¹ = 2
2	2² = 4
4	2⁴ = 16
8	2⁸ = 256
16	2¹⁶ = 65,536
24	2²⁴ = 16,777,216

GIF

Graphics Interchange Format (GIF) is a common format for images that appear on Web pages. GIF uses Lempel-Ziv-Welch (LZW) compression to minimize file size. No information is lost in the compression process; a decompressed image is exactly the same as the original. GIF files can use a maximum of 8 bits per pixel, so they are limited to 256 colors.

JPEG

Joint Photographic Experts Group (JPEG) is another popular format used on Web pages. JPEG can store 24 bits per pixel, so it is capable of displaying more than 16 millions colors. Some information is lost during JPEG conversion, but it usually doesn't affect the perceived quality of the image. JPEG is not a file format; it is a compression scheme. JPEG File Interchange Format (JFIF) is a file format commonly used for storing and transferring images that have been compressed according to the JPEG scheme.

EXIF

Exchangeable Image File (EXIF) is a file format used by digital cameras. It was originally developed by the Japan Electronic Industry Development Association. The EXIF file contains an image compressed according to the JPEG specification.

PNG

Portable Network Graphics (PNG) format provides the advantages of the GIF format but supports greater color depth. PNG files can store colors with 8, 24, 32, or 48 bits per pixel, and grayscales with 1, 2, 4, 8, or 16 bits per pixel. PNG also support alpha channel, so it's a suitable format for storing images that support a high number of colors with transparency.

TIFF

Tag Image File Format (TIFF or TIF) can store images with arbitrary color depth, using a variety of compression algorithms. The TFF format can be extended as needed by the approval and addition of new tags. This format is used by engineers when they need to add information in the image itself.

Almost all image file formats can also store metadata related to the image, such as scanner manufacturer, host computer, type of compression, orientation, samples per pixel, and so on.

Conclusion

Hope the article would have helped you in understanding images in GDI+. Read other articles on GDI+ on the website.

This book teaches .NET developers how to work with GDI+ as they develop applications that include graphics, or that interact with monitors or printers. It begins by explaining the difference between GDI and GDI+, and covering the basic concepts of graphics programming in Windows.