Get Ready to Unleash the Power of UCanCode .NET

We can easily construct an image object from an image file using the powerful Image class provided by GDI+, as shown below:

Collapse Copy Code

Image img1("Flower1.jpg");
Image img2("Flower2.jpg");

The Graphics class in GDI+ contains several methods you can use to create basic graphics like drawing rectangles, filling regions, and so on. But to apply alpha blend on images, you need more control. For this, you will have to use the ImageAttributes class and the ColorMatrix structure. An ImageAttributes object lets you control the way graphics is rendered by letting you specify different settings like color adjustment, grayscale adjustment and more. The ColorMatrix is a structure whose instances are parameters in most of the methods of the ImageAttributes class. It contains values specifying the Alpha, Red, Green and Blue channels.

So, the next step is to initialize a color matrix object and pass it to the appropriate method of an ImageAttributes object.

A color matrix is a matrix that contains values for channels. It's a 5x5 matrix which represents values for the Red, Green, Blue, Alpha channels and another element w, in that order (RGBAw).

In a ColorMatrix object, the diagonal elements of the matrix define the channel values viz. (0,0), (1,1), (2,2), (3,3), and (4,4), in the order as specified before - RGBAw. The values are of type float, and range from 0 to 1. The element w (at (4,4) ) is always 1.

What you have to do is to create a new ColorMatrix instance with the desired channel values. As we want to control the alpha blend channel, we should set the element at (3,3) to the desired value as shown below:

Collapse Copy Code

ColorMatrix ClrMatrix =         { 
            1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
            0.0f, 1.0f, 0.0f, 0.0f, 0.0f,
            0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
            0.0f, 0.0f, 0.0f, 0.5f, 0.0f,
            0.0f, 0.0f, 0.0f, 0.0f, 1.0f
};

The 0.5f value in the above code represents the alpha blend value. 0.5 means semi transparent (50%).

Once you initialize the ColorMatrix, you create a new ImageAttributes object and assign the newly created ColorMatrix to it. This is done by calling the SetColorMatrix method on the ImageAttributes object. For example, the following code creates a new ImageAttributes object and sets its color matrix to the one just created:

Collapse Copy Code

ImageAttributes ImgAttr;

ImgAttr.SetColorMatrix(&ClrMatrix, ColorMatrixFlagsDefault, 
                        ColorAdjustTypeBitmap);

The final step is to draw the original image with the ImageAttributes object just created. Using this, ImageAttributes object would draw the original image with the alpha value we set in the color matrix, creating the alpha image.

As we need to blend img2 over img1, first we should draw img1 on the desired Graphics using the simplest overloads of the Graphics.DrawImage method, as shown below:

Collapse Copy Code

g.DrawImage(&img1, 0,0,img1.Width,img1.Height);

To alpha blend image img2 on img1, we call one of the overloads of the Graphics.DrawImage method on the Graphics object which accepts an ImageAttributes object with which we would specify the render modifications. For example, the following code draws the image img2 at the location specified, with the ImageAttributes object ImgAttr on a Graphics object g.

Collapse Copy Code

g.DrawImage(&img2, RectF destination(0,0, img2.Width,img2.Height), 0,0, 
                  img2.Width,img2.Height,UnitPixel,&ImgAttr);

Now the resultant image on the Graphics object represents the alpha blended result of Img2 over Img1.

(The Graphics object can be any graphics object which may be obtained from a control, created from image etc..)