Skip to content

Archive

Tag: Image Processing

Implementing a colour filter is a rather simple affair. All a colour filter will do is specify the percentage of red, green and blue to leave in the image.

So, for example, if you would like to see only the green component, then you keep the green component of each pixel unchanged, and set the blue and red components to 0.

You can create interesting filters by playing with the ratios too. So for example to get a brownish filter, you can set the red percentage multiplier to 1, green to 0.6 and blue to 0. Then multiply each component by the respective values. In this example, the red value will be unchanged, and blue will be removed entirely. The green component, however, will be set to 60% of the original value.

Applying a red filter

Applying a red filter


You can download the full code for the sample application which contains code for all the image effects covered in the series here.

public void ApplyColorFilter(double r, double g, double b)
{
    byte A, R, G, B;
    Color pixelColor;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;
            R = (byte)(pixelColor.R * r);
            G = (byte)(pixelColor.G * g);
            B = (byte)(pixelColor.B * b);
            bitmapImage.SetPixel(x, y, Color.FromArgb((int)A, (int)R, (int)G, (int)B));
        }
    }
}

Share

To increase the brightness of an image, all you need to do is add a value to each component for each pixel in the image.

Increasing the brightness is not always reversible, because as the colour value tops out at 255, if the increased value goes above this value, it will be limited to that value. This makes any reversal of the process impossible. The opposite is true for negative values. Then if the value falls below 0, then the values are limited.

Increasing the brightness by 100

Increasing the brightness by 100

You can download the full code for the sample application which contains code for all the image effects covered in the series here.


        public void ApplyBrightness(int brightness)
        {
            int A, R, G, B;
            Color pixelColor;

            for (int y = 0; y < bitmapImage.Height; y++)
            {
                for (int x = 0; x < bitmapImage.Width; x++)
                {
                    pixelColor = bitmapImage.GetPixel(x, y);
                    A = pixelColor.A;
                    R =  pixelColor.R + brightness;
                    if (R > 255)
                    {
                        R = 255;
                    }
                    else if (R < 0)
                    {
                        R = 0;
                    }

                    G = pixelColor.G + brightness;
                    if (G > 255)
                    {
                        G = 255;
                    }
                    else if (G < 0)
                    {
                        G = 0;
                    }

                    B = pixelColor.B + brightness;
                    if (B > 255)
                    {
                        B = 255;
                    }
                    else if (B < 0)
                    {
                        B = 0;
                    }

                    bitmapImage.SetPixel(x, y, Color.FromArgb(A, R, G, B));
                }
            }

        }

Share

Contrast in a picture is a measure of how close the range of colours in a picture are. The closer the colours are together, the lower the contrast.

The value for the contrast ranges from -100 to 100, with positive numbers increasing the contrast, and negative numbers decreasing the contrast.

Now, we calculate the contrast value which we will use in the calculation with
((100 + contrast) / 100)2

Then, for each pixel in the image, we take each component of the pixel, and divide the value by 255 to get a value between 0 and 1. We then subtract 0.5, and
any values which are negative will have their contrast decreased, while any positive values will have their contrast increased.

Then we add back the 0.5, and convert the value back to a range of 0-255. After that we set the pixel colour again.

Increasing the contrast by 50

Increasing the contrast by 50


You can download the full code for the sample application which contains code for all the image effects covered in the series here.

public void ApplyContrast(double contrast)
{
    double A, R, G, B;

    Color pixelColor;

    contrast = (100.0 + contrast) / 100.0;
    contrast *= contrast;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;

            R = pixelColor.R / 255.0;
            R -= 0.5;
            R *= contrast;
            R += 0.5;
            R *= 255;
             
            if (R > 255)
            {
                R = 255;
            }
            else if (R < 0)
            {
                R = 0;
            }

            G = pixelColor.G / 255.0;
            G -= 0.5;
            G *= contrast;
            G += 0.5;
            G *= 255;
            if (G > 255)
            {
                G = 255;
            }
            else if (G < 0)
            {
                G = 0;
            }

            B = pixelColor.B / 255.0;
            B -= 0.5;
            B *= contrast;
            B += 0.5;
            B *= 255;
            if (B > 255)
            {
                B = 255;
            }
            else if (B < 0)
            {
                B = 0;
            }

            bitmapImage.SetPixel(x, y, Color.FromArgb((int)A, (int)R, (int)G, (int)B));
        }
    }

}

Share

Converting an image to greyscale is a relatively easy effect to apply to an image.

For each pixel in the image, we take the three colour components (red, green and blue), and then combine the values.

Most people would think that you just take the average of the three colours, but the problem with that is the human eye has different sensitivities to different frequencies, so what we need to do is add in the colours at different ratios.

So, to make the colour ratios correct, we multiply the red, green and blue components by 0.299, 0.587 and 0.114 respectively.

We then assign the value to all the components of the pixel.

You can download the full code for the sample application which contains code for all the image effects covered in the series here.

public void ApplyGreyscale()
{
    byte A, R, G, B;
    Color pixelColor;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;
            R =  (byte)((0.299 * pixelColor.R) + (0.587 * pixelColor.G) + (0.114 * pixelColor.B));
            G = B = R;

            bitmapImage.SetPixel(x, y, Color.FromArgb((int)A, (int)R, (int)G, (int)B));
        }
    }

}
Share

This is the first part of my series on image processing, and to start off with, I will cover a relatively easy topic – how to invert the colours of an image.

You can download the full code for the sample application which contains code for all the image effects covered in the series here.

Actually inverting the colours of an image – in essence, creating a negative of the image, is remarkably easy. All it entails is getting the colour of each pixel, which is broken down into red, green and blue and then subtracting each component from 255.

The Bitmap object we are using in C# uses colour components in the range of 0-255, hence why we subtract the value from 255.

There is also an Alpha component to a colour, but we ignore that and just reuse the original value.

Once we have adjusted the colour components, we set the pixel to the new colour.

Inverting an image

Inverting an image


The code below does not include the instantiation of the bitmapData variable, since the function below forms part of a larger class (available in the full download). It is a standard Bitmap object.

public void ApplyInvert()
{
    byte A, R, G, B;
    Color pixelColor;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;
            R = (byte)(255 - pixelColor.R);
            G = (byte)(255 - pixelColor.G);
            B = (byte)(255 - pixelColor.B);
            bitmapImage.SetPixel(x, y, Color.FromArgb((int)A, (int)R, (int)G, (int)B));
        }
    }

}
Share

Another type of sharpening effect is mean removal. It works similarly to the standard sharpening, except it subtracts values from all the surrounding pixels evenly.

The grid which we used for this effect is as follows

-1 -1 -1
-1 11 -1
-1 -1 -1

This gives a much more noticeable sharpening effect on the image.

Mean removal

Mean removal


You can download the full code for the sample application which contains code for all the image effects covered in the series here.

public void ApplyMeanRemoval(double weight)
{
    ConvolutionMatrix matrix = new ConvolutionMatrix(3);
    matrix.SetAll(1);
    matrix.Matrix[0, 0] = -1;
    matrix.Matrix[1, 0] = -1;
    matrix.Matrix[2, 0] = -1;
    matrix.Matrix[0, 1] = -1;
    matrix.Matrix[1, 1] = weight;
    matrix.Matrix[2, 1] = -1;
    matrix.Matrix[0, 2] = -1;
    matrix.Matrix[1, 2] = -1;
    matrix.Matrix[2, 2] = -1;
    matrix.Factor = weight - 8;
    bitmapImage = Convolution3x3(bitmapImage, matrix);

}
Share