Posts Tagged 'Alpha Blending'

C# How to: Image filtering implemented using a ColorMatrix

Article purpose

This is based around creating basic filters. The different types of filters discussed are: Grayscale, Transparency, Image Negative and Sepia tone. All filters are implemented as targeting the Image class, as well as the Bitmap class as the result of inheritance and upcasting.

Note: This is a follow up to . The previously published related article implements filtering by performing calculations and updating pixel colour component values namely Alpha, Red, Green and Blue. This achieves the same filtering through implementing various transformations, in essence providing an alternative solution. For the sake of convenience I have included the pixel manipulation in addition to the detailed by this article.

Sample source code

This is accompanied by a sample source code Visual Studio project which is available for download .

Implementing a ColorMatrix

From :

Defines a 5 x 5 matrix that contains the coordinates for the RGBAW space. Several methods of the ImageAttributes class adjust image colors by using a color matrix.

The matrix coefficients constitute a 5 x 5 linear transformation that is used for transforming ARGB homogeneous values. For example, an ARGB vector is represented as red, green, blue, alpha and w, where w is always 1.

When implementing a translation using the class values specified are added to one or more of the four colour components. A value that is to be added may only range from 0 to 1 inclusive. Note that adding a negative value results in subtracting values. A good article that illustrates implementing a can be found on MSDN: How to: Translate Image Colors.

The following code snippet provides the implementation of the ApplyColorMatrix method.

private static Bitmap ApplyColorMatrix(Image sourceImage, ColorMatrix colorMatrix)
    Bitmap bmp32BppSource = GetArgbCopy(sourceImage);
    Bitmap bmp32BppDest = new Bitmap(bmp32BppSource.Width, bmp32BppSource.Height, PixelFormat.Format32bppArgb);

using (Graphics graphics = Graphics.FromImage(bmp32BppDest)) { ImageAttributes bmpAttributes = new ImageAttributes(); bmpAttributes.SetColorMatrix(colorMatrix); graphics.DrawImage(bmp32BppSource, new Rectangle(0, 0, bmp32BppSource.Width, bmp32BppSource.Height), 0, 0, bmp32BppSource.Width, bmp32BppSource.Height, GraphicsUnit.Pixel, bmpAttributes);
return bmp32BppDest; }

The ApplyColorMatrix method signature defines a parameter of type and a second parameter of type . This method is intended to apply the specified upon the parameter specified.

The source is firstly copied in order to ensure that the that is to be transformed is defined with a pixel format of 32 bits per pixel, consisting of the colour components Alpha, Red, Green and Blue. Next we create a blank memory defined to reflect the same size dimensions as the original source . A can be implemented by means of applying an when invoking the defined by the class.

Creating an ARGB copy

The source code snippet listed below converts source images into 32Bit ARGB formatted :

private static Bitmap GetArgbCopy(Image sourceImage)
    Bitmap bmpNew = new Bitmap(sourceImage.Width, sourceImage.Height, PixelFormat.Format32bppArgb);

using(Graphics graphics = Graphics.FromImage(bmpNew)) { graphics.DrawImage(sourceImage, new Rectangle (0, 0, bmpNew.Width, bmpNew.Height), new Rectangle (0, 0, bmpNew.Width, bmpNew.Height), GraphicsUnit.Pixel); graphics.Flush(); }
return bmpNew; }

The GetArgbCopy method creates a blank memory Bitmap having the same size dimensions as the source image. The newly created Bitmap is explicitly specified to conform to a 32Bit ARGB format. By making use of a Graphics object of which the context is bound to the new Bitmap instance the source code draws the original image to the new Bitmap.

The Transparency Filter

The transparency filter is intended to create a copy of an , increase the copy’s level of transparency and return the modified copy to the calling code. Listed below is source code which defines the DrawWithTransparency extension method.

public static Bitmap DrawWithTransparency(this Image sourceImage)
    ColorMatrix colorMatrix = new ColorMatrix(new float[][]
                            new float[]{1, 0, 0, 0, 0},
                            new float[]{0, 1, 0, 0, 0},
                            new float[]{0, 0, 1, 0, 0},
                            new float[]{0, 0, 0, 0.3f, 0},
                            new float[]{0, 0, 0, 0, 1}

return ApplyColorMatrix(sourceImage, colorMatrix); }

Due to the ApplyColorMatrix method defined earlier implementing an filter simply consists of defining the filter algorithm in the form of a and then invoking ApplyColorMatrix.

The is defined to apply no change to the Red, Green and Blue components whilst reducing the Alpha component by 70%.

Image Filters Transparency ColorMatrix

The Grayscale Filter

All of the filter illustrated in this are implemented in a fashion similar to the DrawWithTransparency method. The DrawAsGrayscale is implemented as follows:

public static Bitmap DrawAsGrayscale(this Image sourceImage)
    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}

return ApplyColorMatrix(sourceImage, colorMatrix); }

The grayscale filter is achieved by adding together 11% blue, 59% green and 30% red, then assigning the total value to each colour component.

Image Filters Grayscale ColorMatrix

The Sepia Tone Filter

The sepia tone filter is implemented in the DrawAsSepiaTone. Notice how this method follows the same convention as the previously discussed filters. The source code listing is detailed below.

 public static Bitmap DrawAsSepiaTone(this Image sourceImage)
     ColorMatrix colorMatrix = new ColorMatrix(new float[][] 
                        new float[]{.393f, .349f, .272f, 0, 0},
                        new float[]{.769f, .686f, .534f, 0, 0},
                        new float[]{.189f, .168f, .131f, 0, 0},
                        new float[]{0, 0, 0, 1, 0},
                        new float[]{0, 0, 0, 0, 1}

return ApplyColorMatrix(sourceImage, colorMatrix); }

The formula used to calculate a sepia tone differs significantly from the grayscale filter discussed previously. The formula can be simplified as follows:

  • Red Component: Sum total of: 39.3% red, 34.9% green , 27.2% blue
  • Green Component: Sum total of: 76.9% red, 68.6% green , 53.4% blue
  • Blue Component: Sum total of: 18.9% red, 16.8% green , 13.1% blue

Image Filters Sepia ColorMatrix

The Negative Image Filter

We can implement an filter that resembles film negatives by literally inverting every pixel’s colour components. Listed below is the source code implementation of the DrawAsNegative .

 public static Bitmap DrawAsNegative(this Image sourceImage)
     ColorMatrix colorMatrix = new ColorMatrix(new float[][] 
                            new float[]{-1, 0, 0, 0, 0},
                            new float[]{0, -1, 0, 0, 0},
                            new float[]{0, 0, -1, 0, 0},
                            new float[]{0, 0, 0, 1, 0},
                            new float[]{1, 1, 1, 1, 1}

return ApplyColorMatrix(sourceImage, colorMatrix); }

Notice how the negative filter subtracts 1 from each colour component, remember the valid range being 0 to 1 inclusive. This in reality inverts each pixel’s colour component bits. The transform being applied can also be expressed as implementing the bitwise compliment operator on each pixel.

Image Filters Negative Color Matrix

The implementation

The filters described in this are all implemented by means of a . filtering is applied by selecting the corresponding radio button. The source loaded from the file system serves as input to the various filter methods, the filtered copy returned will be displayed next to the original source .

The following code snippet details the radio button checked changed event handler:

private void OnCheckChangedEventHandler(object sender, EventArgs e)
    if (picSource.BackgroundImage != null)
        if (rdGrayscaleBits.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsGrayscale();
        else if (rdGrayscaleDraw.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.DrawAsGrayscale();
        else if (rdTransparencyBits.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.CopyWithTransparency();
        else if (rdTransparencyDraw.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.DrawWithTransparency();
        else if (rdNegativeBits.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsNegative();
        else if (rdNegativeDraw.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.DrawAsNegative();
        else if (rdSepiaBits.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsSepiaTone();
        else if (rdSepiaDraw.Checked == true)
             picOutput.BackgroundImage = picSource.BackgroundImage.DrawAsSepiaTone();

Related Articles


C# How to: Drawing in GDI with Opacity/Alpha components

Article Purpose

In this article we explore GDI+ drawing operations implementing opacity, also known as alpha blending.

Sample source code

This article is accompanied by a sample source code Visual Studio project which is available for download here

C# How to: Drawing in GDI with Opacity/Alpha components

Using the Sample Application

The following is a screenshot of the included sample application:


The screenshot illustrates drawing text and a rectangle onto a Windows Form in Color.SteelBlue with an alpha component of 100.

GDI+ Drawing

In C# it is possible and relatively easy to draw text and two dimensional shapes in GDI+ that support a level of opacity or transparency. The well known abbreviation RGB abbreviates the term Red, Green and Blue. C# supports RGB colours but also what is known as ARGB colours. In the case of ARGB the A abbreviates the word Alpha, in other words an RGB colour with a specified alpha component.

An alpha component specifies a colour’s opacity or transparency. Possible values range from 0 to 255 inclusive, where 0 would represent full transparency and 255 no level of transparency. If a consists of 8 bits and an ARGB colour is composed of 4 components ranging from 0 to 255 each representing a or 8 bits, then an ARGB colour is therefore a 32 bit colour.

The Color structure

The System.Drawing namespace defines the Color structure, which exposes several functions aimed at creating an ARGB Color object instance:

The Paint Event Handler

The bulk of this example’s functionality occurs within the main Form’s handler, as detailed by the following code snippet:

private void MainFormPaintEventHandler(object sender, PaintEventArgs e) 
    Color alphaForeColor = Color.FromArgb(this.foreColorAlphaValue, this.ForeColor); 
    Pen rectanglePen = new Pen(alphaForeColor, 2.0f); 
    SolidBrush textBrush = new SolidBrush(alphaForeColor); 

float x = this.ClientRectangle.Width / 2.0f; x -= e.Graphics.MeasureString(textToDisplay, this .Font).Width / 2.0f;
float y = this.ClientRectangle.Height / 2.0f; y -= e.Graphics.MeasureString(textToDisplay, this.Font).Height / 2.0f;
e.Graphics.DrawString(textToDisplay, this.Font, textBrush, new PointF(x, y));
e.Graphics.DrawRectangle(rectanglePen, 25, 25, this.ClientRectangle.Width - 50, this.ClientRectangle.Height - 50); }

The main Form defines two member variables used in the handler:

 private byte foreColorAlphaValue = 100;
 textToDisplay = "";

In the handler an instance of the structure is created implementing an alpha component defined by the ’s member variable. The object declaration is followed by an ARGB   Pen and SolidBrush declaration.

Next the code determines the X and Y coordinates that would result in drawing the ’s string member variable in the middle of the , after which the actual drawing occurs.

Using the Pen object declared earlier a rectangle is drawn 25 pixels inside the ’s ClientRectangle.

Dewald Esterhuizen

Blog Stats

  • 836,220 hits

Enter your email address to follow and receive notifications of new posts by email.

Join 228 other subscribers


Twitter feed

%d bloggers like this: