Bitmap Tutorial

Before you can understand how to manipulate images, you have to know how the computer sees them. For a bitmap image, the computer actually sees a HUGE series of numbers strung together in a single long list. Each number is 1 byte (8 bits, or 8 1's and 0's) between 0 and 255.

The first 40 bytes tell the computer how many bits per pixel, the number of pixels high and wide the image is, the physical dimensions of the original image (in inches), the compression format used (if any), etc.

The computer creates and stores images by defining a dot of color called a pixel. The images we see on a screen are created by mixing intensities of 3 colors for each pixel. The most common pixel format is 24 bit. 24 bit color allows for 256 different levels of intensity for each of the three colors that are combined to make every other color on the screen. As each combination of different levels of intensity results in a different color, 24 bit pixels can have up to 256 x 256 x 256 = 16,777,216 different colors. The three colors used by computers are blue, green, and red. To define a pixel, all that is needed is the relative intensity of the three colors. For example, the following sets of numbers define pixels of the corresponding color:

[0 0 0] = Black
[255 0 0] = Blue
[0 255 0] = Green
[0 0 255] = Red
[255 255 255] = White

When you and I think of a picture, we think of a 2 dimensional matrix of color dots, but the computer sees a very large list of numbers in only 1 dimension. The computer knows when one line of pixels stops and the next one starts based on the data in the first 40 bytes of the image. In order to correctly manipulate the image, the total number of pixels, the number of pixels in each row, and the number of rows must be known. In addition, the number of bytes in a row of the image must be an integer multiple of 4. If the number of pixels in a row does not give a number bytes that is an integer multiple of 4, the image file will have columns of "remainder" bytes at the end of the rows to meet this requirement. The remainder has a value from 0 to 3, is constant for each image, and represents the number of these "dummy" columns. The full length of the row in bytes including the remainder is called the "stride."

In Visual Basic, if the commands "Imports system.drawing.imaging" and "Imports system.runtime.interopservices" are included before any of the actual program code, then image as well as the important information can be retrieved as follows:

Dim bmd As BitmapData
Dim bm As Bitmap
Dim bmdat() as byte
bmd = bm.LockBits(New Rectangle(0, 0, bm.Width, bm.Height),
*****Imaging.ImageLockMode.ReadWrite,
*****Imaging.PixelFormat.Format24bppRgb)
w = bmd.Width 'width of image in pixels
h = bmd.Height 'height of image in pixels
bmsize = w*h 'total size of image in pixels
ReDim bmdat(bmd.Stride * h - 1)
Marshal.Copy(bmd.Scan0, bmdat, 0, bmd.Stride * bmd.Height)
r = bmd.Stride - w * 3 'remainder in bytes

The code above copies the full image data in bytes into the 1 dimensional matrix "bmdat." Here, w is width in pixels, h is height in pixels, and r is the remainder in bytes.

Go on to Grayscale