How to Alpha Blend 2 Images in WPF

After having such fun trying to find optimal ways of manipulating images in WPF I decided to write another short post on image manipulation. This time I'd like to demonstrate how to alpha blend 2 images using the WriteableBitmap class.

I'm probably not the best one to explain how alpha blending is done but here's the idea in a nutshell. I get the RGB values of every pixel for the each image and write them to a new bitmap where I manipulate each color information by applying the following formula:

r = ((image1 pixel (red) * alpha level) + (image2 pixel (red) * inverse alpha level)) / 256
b = ((image1 pixel (blue) * alpha level) + (image2 pixel (blue) * inverse alpha level)) / 256
g = ((image1 pixel (green) * alpha level) + (image2 pixel (green) * inverse alpha level)) / 256

unsafe static WriteableBitmap AlphaBlend(BitmapSource image1, BitmapSource image2, int alphaLevel)

{

    const int PIXEL_SIZE = 4;

    int ialphaLevel = 256 - alphaLevel;

    int height = Math.Min(image1.PixelHeight, image2.PixelHeight);

    int width = Math.Min(image1.PixelWidth, image2.PixelWidth);

    var bitmap = new WriteableBitmap(width, height, image1.DpiX, image1.DpiY, PixelFormats.Bgr32, null);

    var bitmap1 = new WriteableBitmap(image1);

    var bitmap2 = new WriteableBitmap(image2);

    bitmap.Lock();

    bitmap1.Lock();

    bitmap2.Lock();

    var backBuffer = (byte*)bitmap.BackBuffer.ToPointer();

    var bitmap1Buffer = (byte*)bitmap1.BackBuffer.ToPointer();

    var bitmap2Buffer = (byte*)bitmap2.BackBuffer.ToPointer();

    for (int y = 0; y < height; y++)

    {

        var row = backBuffer + (y * bitmap.BackBufferStride);

        var img1Row = bitmap1Buffer + (y * bitmap1.BackBufferStride);

        var img2Row = bitmap2Buffer + (y * bitmap2.BackBufferStride);

        for (int x = 0; x < width; x++)

            for (int i = 0; i < PIXEL_SIZE; i++)

                row[x * PIXEL_SIZE + i] = (byte)(((img1Row[x * PIXEL_SIZE + i] * alphaLevel) + (img2Row[x * PIXEL_SIZE + i] * ialphaLevel)) >> 8);

    }

    bitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));

    bitmap2.Unlock();

    bitmap1.Unlock();

    bitmap.Unlock();

    return bitmap;

}

The method above will probably work best if the 2 images are of the same size. I hope you found this information useful.