What is Image Processing?

Image processing is a physical process used to convert an image signal into a physical
image. The image signal can be either digital or analog. The actual output itself can be an
actual physical image or the characteristics of an image.

The most common type of image processing is photography. In this process, an image is
captured using a camera to create a digital or analog image. In order to produce a
physical picture, the image is processed using the appropriate technology based on the
input source type.

In digital photography, the image is stored as a computer file. This file is translated using
photographic software to generate an actual image. The colors, shading, and nuances are
all captured at the time the photograph is taken the software translates this information
into an image.

When creating images using analog photography, the image is burned into a film using a
chemical reaction triggered by controlled exposure to light. The image is processed in a
darkroom, using special chemicals to create the actual image. This process is decreasing
in popularity due to the advent of digital photography, which requires less effort and
special training to product images.

In addition to photography, there are a wide range of other image processing operations.
The field of digital imaging has created a whole range of new applications and tools that
were previously impossible. Face recognition software, medical image processing and
remote sensing are all possible due to the development of digital image processing.
Specialized computer programs are used to enhance and correct images. These programs
apply algorithms to the actual data and are able to reduce signal distortion, clarify fuzzy
images and add light to an underexposed image.

Image processing techniques were first developed in 1960 through the collaboration of a
wide range of scientists and academics. The main focus of their work was to develop
medical imaging, character recognition and create high quality images at the microscopic
level. During this period, equipment and processing costs were prohibitively high.

The financial constraints had a serious impact on the depth and breadth of technology
development that could be done. By the 1970s, computing equipment costs had dropped
substantially making digital image processing more realistic. Film and software
companies invested significant funds into the development and enhancement of image
processing, creating a new industry.
There are three major benefits to digital image processing. The consistent high quality of
the image, the low cost of processing and the ability to manipulate all aspects of the
process are all great benefits. As long as computer processing speed continues to increase
while the cost of storage memory continues to drop, the field of image processing will
grow.

Digital image processing is the use of computer algorithms to perform image

processing on digital images. As a subcategory or field of digital signal processing,
digital image processing has many advantages over analog image processing. It allows a
much wider range of algorithms to be applied to the input data and can avoid problems
such as the build-up of noise and signal distortion during processing. Since images are
defined over two dimensions (perhaps more) digital image processing may be modeled in
the form of Multidimensional Systems.

Top-hat transform
In mathematical morphology and digital image processing, TOP-HAT transform is an
operation that extracts small elements and details from given images. There exist two
types of top-hat transform: The white top-hat transform is defined as the difference
between the input image and its opening by some structuring element; The black top-hat
transform is defined dually as the difference between the closing and the input image.

Mathematical definitions

Let be a grayscale image, mapping points from an Euclidean space or

discrete grid E (such as R2 or Z2) into the real line. Let b(x) be a grayscale structuring
element.

Then, the white top-hat transform of f is given by:

where denotes the opening operation. that are extracted by the top-hat transforms can be
controlled by the choice of the structuring element b. The bigger the former, the larger
the elements extracted.

Both top-hat transforms are images that contain only non-negative values at all pixels.

Grayscale
In photography and computing, a grayscale or greyscale digital image is an image in
which the value of each pixel is a single sample, that is, it carries only intensity
information. Images of this sort, also known as black-and-white, are composed
exclusively of shades of gray, varying from black at the weakest intensity to white at the
strongest.[1]

Grayscale images are distinct from one-bit black-and-white images, which in the context
of computer imaging are images with only the two colors, black, and white (also called
bilevel or binary images). Grayscale images have many shades of gray in between.
Grayscale images are also called monochromatic, denoting the absence of any chromatic
variation.

Grayscale images are often the result of measuring the intensity of light at each pixel in a
single band of the electromagnetic spectrum (e.g. infrared, visible light, ultraviolet, etc.),
and in such cases they are monochromatic proper when only a given frequency is
captured. But also they can be synthesized from a full color image; see the section about
converting to grayscale.

Pixel
In digital imaging, a pixel (or picture element)[1] is a single point in a raster image. The
pixel is the smallest addressable screen element; it is the smallest unit of picture that can
be controlled. Each pixel has its own address. The address of a pixel corresponds to its
coordinates. Pixels are normally arranged in a two-dimensional grid, and are often
represented using dots or squares. Each pixel is a sample of an original image; more
samples typically provide more accurate representations of the original. The intensity of
each pixel is variable. In color image systems, a color is typically represented by three or
four component intensities such as red, green, and blue, or cyan, magenta, yellow, and
black.

In some contexts (such as descriptions of camera sensors), the term pixel is used to refer
to a single scalar element of a multi-component representation (more precisely called a
photosite in the camera sensor context, although the neologism sensel is also sometimes
used to describe the elements of a digital camera's sensor),[2] while in others the term may
refer to the entire set of such component intensities for a spatial position. In color systems
that use chroma subsampling, the multi-component concept of a pixel can become
difficult to apply, since the intensity measures for the different color components
correspond to different spatial areas in a such a representation.

The word pixel is based on a contraction of pix ("pictures") and el (for "element"); similar
formations with el for "element" include the words voxel[3] and texel.[3]

Conversion of color image to gray scale image

We've done a few tutorials about image editing with C#. We're going to continue the
series with a tutorial on how to convert a color image to black and white. This tutorial
will show three different ways to convert an image to grayscale - starting with the easiest
and slowest.

You're probably wondering why you would want to see multiple ways to accomplish the
same thing. It's hard to predict what technique will work best for everyone's application,
so I've decided to outline several different possibilities.

Below is the image I used to test each algorithm and to benchmark their performance.
The image can be downloaded free from Gaming Textures. The conversion times listed
were obtained using my computer so your times might be different.
Original color image

Image converted to black and white

1. Slow and Simple

Convert Time: 1,135ms

The first method I'm going to show you is by far the easiest to understand and implement.
Unfortunately, it's also the slowest.

public static Bitmap MakeGrayscale(Bitmap original)

{
//make an empty bitmap the same size as original
Bitmap newBitmap = new Bitmap(original.Width, original.Height);
 for (int i = 0; i < original.Width; i++)
{
for (int j = 0; j < original.Height; j++)
{
//get the pixel from the original image
Color originalColor = original.GetPixel(i, j);

//create the grayscale version of the pixel

int grayScale = (int)((originalColor.R * .3) + (originalColor.G * .59)
+ (originalColor.B * .11));

//create the color object

Color newColor = Color.FromArgb(grayScale, grayScale, grayScale);

//set the new image's pixel to the grayscale version

newBitmap.SetPixel(i, j, newColor);
}
}

return newBitmap;
}

This code looks at every pixel in the original image and sets the same pixel in the new
bitmap to a grayscale version. You can probably figure out why this is so slow. If the
image is 2048x2048, this code will call GetPixel and SetPixel over 4 million times. Those
functions aren't the most efficient way to get pixel data from the image.

You might be wondering where the numbers .3, .59, and .11 came from. In reality, you
could just take the average color by adding up R, G, B and dividing by three. In fact,
you'll get a pretty good black and white image by doing that. However, at some point,
someone a lot smarter than me figured out that these numbers better approximate the
human eye's sensitivity to each of those colors. The Wikipedia article on grayscale has
some pretty good information about that.

This method will work fine for small images or when you don't really care about how
long it takes to convert it to black and white. If you need it done quickly, I would
recommend one of the next two methods.

2. Faster and Complicated

Convert Time: 188ms

The next technique I'm going to show you is based on the previous one, but much faster.
It still iterates through every pixel, but we're going to utilize C#'s unsafe keyword to
make getting the pixel data much more efficient.

public static Bitmap MakeGrayscale2(Bitmap original)

{
unsafe
{
//create an empty bitmap the same size as original
Bitmap newBitmap = new Bitmap(original.Width, original.Height);

//lock the original bitmap in memory

BitmapData originalData = original.LockBits(
new Rectangle(0, 0, original.Width, original.Height),
ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb);

//lock the new bitmap in memory

BitmapData newData = newBitmap.LockBits(
new Rectangle(0, 0, original.Width, original.Height),
ImageLockMode.WriteOnly, PixelFormat.Format24bppRgb);

//set the number of bytes per pixel

int pixelSize = 3;

for (int y = 0; y
y++) < original.Height;
{
//get the data from the original image
byte* oRow = (byte*)originalData.Scan0 + (y * originalData.Stride);

//get the data from the new image

byte* nRow = (byte*)newData.Scan0 + (y * newData.Stride);

for (int x = 0; x < original.Width; x++)

{
//create
grayscale the version
byte grayScale =
(byte)((oRow[x * pixelSize] * .11) + //B
(oRow[x * pixelSize + 1] * .59) + //G
(oRow[x * pixelSize + 2] * .3)); //R

//set the new image's pixel to the grayscale version

 nRow[x * pixelSize] = grayScale; //B
nRow[x * pixelSize + 1] = grayScale; //G
nRow[x * pixelSize + 2] = grayScale; //R
}
}

//unlock the bitmaps

newBitmap.UnlockBits(newData);
original.UnlockBits(originalData);

return newBitmap;
}
}

There's a lot of code here so let's go through it piece by piece. The first thing we need to
do is lock the bits in the Bitmap objects. Locking the bits keeps the .NET runtime from
moving them around in memory. This is important because we're going to use a pointer,
and if the data is moving around the pointer won't point to the correct thing anymore.
You'll need to know the pixel format of the image you're trying to convert. I'm using
jpeg's, which are 24 bits per pixel. There is a way to get the pixel format from an image,
but that's outside the scope of this tutorial. The integer, pixelSize, is the number of bytes
per pixel in your original image. Since my images were 24 bits per pixel, that translates to
3 bytes per pixel.

To get pixel data, I start by getting the address to the first pixel in each row of the image.
Scan0 returns the address of the first pixel in the image. So in order to get the address of
the first pixel in the row, we have to add the number of bytes in the row, Stride,
multiplied by the row number, y. Below is a diagram that might help you understand this
a little better.

Now we can get color data straight from memory by accessing it like an array. The byte
at x * pixelSize will be the blue, x * pixelSize + 1 is green, and x * pixelSize + 2 is red.
This is why pixelSize is very important. If the image you provided is not 3 bytes per
pixel, you'll be pulling color data from the wrong location in memory.

Next, make the grayscale version using the same process as the previous method and set
the exact same pixel in the new image. All that's left to do is to unlock the bitmaps and
return the new image.

3. Short and Sweet

Convert Time: 62ms

The last method is probably the best way. It's faster than the previous two methods and
uses much less code. This technique uses a ColorMatrix to perform the conversion. A
ColorMatrix is a 5x5 matrix that can make just about any modifications to the color of an
image. A ColorMatrix is pretty complicated and deserves a whole tutorial to itself. For
now, if you want more information about it, you'll have to do the research yourself.

public static Bitmap MakeGrayscale3(Bitmap original)

{
//create a blank bitmap the same size as original
Bitmap newBitmap = new Bitmap(original.Width, original.Height);

//get a graphics object from the new image

Graphics g = Graphics.FromImage(newBitmap);

//create the grayscale ColorMatrix

ColorMatrix colorMatrix = new ColorMatrix(
new float[][]
{
new float[] {.3f, .3f, .3f, 0, 0},
new float[] {.59f, .59f, .59f, 0, 0},
new float[] {.11f, .11f, .11f, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {0, 0, 0, 0, 1}
});

//create some image attributes

ImageAttributes attributes = new ImageAttributes();

//set the color matrix attribute

attributes.SetColorMatrix(colorMatrix);
 //draw the original image on the new image
//using the grayscale color matrix
g.DrawImage(original, new Rectangle(0, 0, original.Width, original.Height),
0, 0, original.Width, original.Height, GraphicsUnit.Pixel, attributes);

//dispose the Graphics object

g.Dispose();
return newBitmap;
}

This time we're going to use GDI to draw the new black and white image. The benefit of
this technique over the last one is that we don't need to know any information about the
image's pixel format. The code here is pretty straight forward. First create the blank
image and get a Graphics object from it. Next, create the ColorMatrix that will convert
the original image to grayscale. Declare an ImageAttributes object that will use the
ColorMatrix and use it to draw the new image using DrawImage.

That's it for converting an image to grayscale using C# and .NET. Hopefully one of the
above techniques will work for your application. Leave us a comment if you've got
questions or anything else to say.