C# How to: Bitwise Bitmap Blending

Article Purpose

In this article you’ll find a discussion on the topic of blending  images into a single . Various possible methods can be employed in blending images. In this scenario image blending is achieved through means of bitwise operations, implemented on individual colour components Red, Green and Blue.

Sample source code

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

Download Sample Source Code

Bitwise Operations

In this article we will be implementing the following bitwise operators:

  • & Binary And
  • | Binary Or
  • ^ Exclusive Binary Or (XOR)

A good description of how these operators work can be found on MSDN:

The bitwise-AND operator compares each bit of its first operand to the corresponding bit of its second operand. If both bits are 1, the corresponding result bit is set to 1. Otherwise, the corresponding result bit is set to 0.

The bitwise-exclusive-OR operator compares each bit of its first operand to the corresponding bit of its second operand. If one bit is 0 and the other bit is 1, the corresponding result bit is set to 1. Otherwise, the corresponding result bit is set to 0.

The bitwise-inclusive-OR operator compares each bit of its first operand to the corresponding bit of its second operand. If either bit is 1, the corresponding result bit is set to 1. Otherwise, the corresponding result bit is set to 0.

Using the sample Application

Included with this article is a Visual Studio solution containing sample source code and a sample application. The Bitwise Bitmap Blending Sample application allows the user to select two input/source images from the local file system. Selected source images, once specified are displayed as previews with the majority of the application front end being occupied by an output .

The following image is a screenshot of the Bitwise Bitmap Blending application in action:

Bitwise Bitmap Blending

If the user decides to, blended images can be saved to the local file system by clicking the Save button.

The BitwiseBlend Extension method

The Sample Source provides the definition for the BitwiseBlend extension method. This method’s declaration indicates being an extension method targeting the class.

The BitwiseBlend method requires 4 parameters: the being blended with and three parameters all of type BitwiseBlendType. The enumeration defines the available blending types in regards to bitwise operations. The following code snippet provides the definition of the BitwiseBlendType enum:

public enum BitwiseBlendType  
{
   None,
   Or,
   And,
   Xor
}

The three BitwiseBlendType parameters relate to a pixel’s colour components: Red, Green and Blue.

The code snippet below details the implementation of the BitwiseBlend Extension method:

 public static Bitmap BitwiseBlend(this Bitmap sourceBitmap, Bitmap blendBitmap,  
                                     BitwiseBlendType blendTypeBlue, BitwiseBlendType  
                                     blendTypeGreen, BitwiseBlendType blendTypeRed) 
 { 
     BitmapData sourceData = sourceBitmap.LockBits(new Rectangle(0, 0, 
                             sourceBitmap.Width, sourceBitmap.Height), 
                             ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); 

byte[] pixelBuffer = new byte[sourceData.Stride * sourceData.Height]; Marshal.Copy(sourceData.Scan0, pixelBuffer, 0, pixelBuffer.Length); sourceBitmap.UnlockBits(sourceData);
BitmapData blendData = blendBitmap.LockBits(new Rectangle(0, 0, blendBitmap.Width, blendBitmap.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);
byte[] blendBuffer = new byte[blendData.Stride * blendData.Height]; Marshal.Copy(blendData.Scan0, blendBuffer, 0, blendBuffer.Length); blendBitmap.UnlockBits(blendData);
int blue = 0, green = 0, red = 0;
for (int k = 0; (k + 4 < pixelBuffer.Length) && (k + 4 < blendBuffer.Length); k += 4) { if (blendTypeBlue == BitwiseBlendType.And) { blue = pixelBuffer[k] & blendBuffer[k]; } else if (blendTypeBlue == BitwiseBlendType.Or) { blue = pixelBuffer[k] | blendBuffer[k]; } else if (blendTypeBlue == BitwiseBlendType.Xor) { blue = pixelBuffer[k] ^ blendBuffer[k]; }
if (blendTypeGreen == BitwiseBlendType.And) { green = pixelBuffer[k+1] & blendBuffer[k+1]; } else if (blendTypeGreen == BitwiseBlendType.Or) { green = pixelBuffer[k+1] | blendBuffer[k+1]; } else if (blendTypeGreen == BitwiseBlendType.Xor) { green = pixelBuffer[k+1] ^ blendBuffer[k+1]; }
if (blendTypeRed == BitwiseBlendType.And) { red = pixelBuffer[k+2] & blendBuffer[k+2]; } else if (blendTypeRed == BitwiseBlendType.Or) { red = pixelBuffer[k+2] | blendBuffer[k+2]; } else if (blendTypeRed == BitwiseBlendType.Xor) { red = pixelBuffer[k+2] ^ blendBuffer[k+2]; }
if (blue < 0) { blue = 0; } else if (blue > 255) { blue = 255; }
if (green < 0) { green = 0; } else if (green > 255) { green = 255; }
if (red < 0) { red = 0; } else if (red > 255) { red = 255; }
pixelBuffer[k] = (byte)blue; pixelBuffer[k + 1] = (byte)green; pixelBuffer[k + 2] = (byte)red; }
Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height);
BitmapData resultData = resultBitmap.LockBits(new Rectangle (0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(pixelBuffer, 0, resultData.Scan0, pixelBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap; }

All image manipulation tasks performed by the BitwiseBlend Extension method are implemented by directly accessing a ’s underlying raw pixel data.

A first needs to be locked in memory by invoking the method. Once the object has been locked in memory the method instantiates a array, representing a pixel data buffer. Each element present in the data buffer reflects an individual colour component: Alpha, Red, Green or Blue.

Take note: Colour component ordering is opposite to the expected ordering. Colour components are ordered: Blue, Green, Red, Alpha. The short explanation for reverse ordering can be attributed to Little Endian CPU architecture and Blue being represented by the least significant bits of a pixel.

In order to perform bitwise operations on each pixel representing the specified the sample source code employs a for loop, iterating both data buffers. The possibility exists that the two s specified might not have the same size dimensions. Notice how the for loop defines two conditional statements, preventing the loop from iterating past the maximum bounds of the smallest .

Did you notice how the for loop increments the defined counter by four at each loop operation? The reasoning being that every four elements of the data buffer represents a pixel, being composed of: Blue, Green, Red and Alpha. Iterating four elements per iteration thus allows us to manipulate all the colour components of a pixel.

The operations performed within the for loop are fairly straight forward. The source code checks to determine which type of bitwise operation to implement per colour component. Colour components can only range from 0 to 255 inclusive, we therefore perform range checking before assigning calculated values back to the data buffer.

The final step performed involves creating a new resulting object and populating the new with the updated pixel data buffer.

Sample Images

In generating the sample images two source images were specified, a sunflower and bouquet of roses. The sunflower image has been released into the public domain and can be downloaded from Wikipedia. The bouquet of roses image has been licensed under the Creative Commons Attribution-Share Alike 3.0 Unported, 2.5 Generic, 2.0 Generic and 1.0 Generic license and can be downloaded from  Wikipedia.

The Original Images
Sunflower_USFWS
Bouquet_de_roses_roses
The Blended Images
SunflowerRoses
SunflowerRoses7
SunflowerRoses4
SunflowerRoses10
SunflowerRoses8
SunflowerRoses9

Related Articles

39 Responses to “C# How to: Bitwise Bitmap Blending”



  1. 1 C# How to: Bitmap Colour Tint | Software by Default Trackback on April 26, 2013 at 1:06 AM
  2. 2 C# How to: Image Contrast | Software by Default Trackback on April 26, 2013 at 1:15 AM
  3. 3 C# How to: Image Solarise | Software by Default Trackback on April 26, 2013 at 1:17 AM
  4. 4 C# How to: Bitmap Colour Shading | Software by Default Trackback on April 26, 2013 at 1:18 AM
  5. 5 C# How to: Bi-tonal Bitmaps | Software by Default Trackback on April 26, 2013 at 1:20 AM
  6. 6 C# How to: Bitmap Colour Balance | Software by Default Trackback on April 26, 2013 at 1:22 AM
  7. 7 C# How to: Image Arithmetic | Software by Default Trackback on April 27, 2013 at 8:21 AM
  8. 8 C# How to: Image Convolution | Software by Default Trackback on May 1, 2013 at 5:41 PM
  9. 9 C# How to: Image filtering implemented using a ColorMatrix | Software by Default Trackback on May 1, 2013 at 9:03 PM
  10. 10 C# How to: Blending Bitmap images using colour filters | Software by Default Trackback on May 1, 2013 at 10:50 PM
  11. 11 C# How to: Decoding/Converting Base64 strings to Bitmap images | Software by Default Trackback on May 2, 2013 at 9:34 PM
  12. 12 C# How to: Image Edge Detection | Software by Default Trackback on May 11, 2013 at 1:22 PM
  13. 13 C# How to: Difference Of Gaussians | Software by Default Trackback on May 18, 2013 at 12:49 AM
  14. 14 C# How to: Image Median Filter | Software by Default Trackback on May 18, 2013 at 4:15 AM
  15. 15 C# How to: Image Unsharp Mask | Software by Default Trackback on May 18, 2013 at 12:17 PM
  16. 16 C# How to: Image Colour Average | Software by Default Trackback on May 18, 2013 at 9:48 PM
  17. 17 C# How to: Image Erosion and Dilation | Software by Default Trackback on May 19, 2013 at 10:23 AM
  18. 18 C# How to: Morphological Edge Detection | Software by Default Trackback on May 25, 2013 at 8:22 AM
  19. 19 C# How to: Boolean Edge Detection | Software by Default Trackback on June 1, 2013 at 2:08 AM
  20. 20 C# How to: Gradient Based Edge Detection | Software by Default Trackback on June 1, 2013 at 4:46 PM
  21. 21 C# How to: Image Cartoon Effect | Software by Default Trackback on June 2, 2013 at 4:13 PM
  22. 22 C# How to: Sharpen Edge Detection | Software by Default Trackback on June 7, 2013 at 5:11 AM
  23. 23 C# How to: Calculating Gaussian Kernels | Software by Default Trackback on June 8, 2013 at 10:58 AM
  24. 24 C# How to: Image Blur | Software by Default Trackback on June 9, 2013 at 10:19 PM
  25. 25 C# How to: Image Transform Rotate | Software by Default Trackback on June 16, 2013 at 10:39 AM
  26. 26 C# How to: Image Transform Shear | Software by Default Trackback on June 16, 2013 at 5:44 PM
  27. 27 C# How to: Compass Edge Detection | Software by Default Trackback on June 22, 2013 at 9:34 PM
  28. 28 C# How to: Oil Painting and Cartoon Filter | Software by Default Trackback on June 30, 2013 at 10:46 AM
  29. 29 C# How to: Stained Glass Image Filter | Software by Default Trackback on June 30, 2013 at 10:49 AM
  30. 30 C# How to: Generate a Web Service from WSDL | Software by Default Trackback on June 30, 2013 at 4:07 PM
  31. 31 C# How to: Bitmap Colour Substitution implementing thresholds | Software by Default Trackback on July 6, 2013 at 4:32 PM
  32. 32 C# How to: Swapping Bitmap ARGB Colour Channels | Software by Default Trackback on July 6, 2013 at 5:01 PM
  33. 33 C# How to: Image filtering by directly manipulating Pixel ARGB values | Software by Default Trackback on July 8, 2013 at 2:56 AM
  34. 34 C# How to: Image ASCII Art | Software by Default Trackback on July 14, 2013 at 7:21 AM
  35. 35 C# How to: Weighted Difference of Gaussians | Software by Default Trackback on July 14, 2013 at 8:11 PM
  36. 36 C# How to: Image Boundary Extraction | Software by Default Trackback on July 21, 2013 at 10:23 AM
  37. 37 C# How to: Image Abstract Colours Filter | Software by Default Trackback on July 28, 2013 at 7:40 PM
  38. 38 C# How to: Fuzzy Blur Filter | Software by Default Trackback on August 9, 2013 at 6:38 AM
  39. 39 C# How to: Image Distortion Blur | Software by Default Trackback on August 9, 2013 at 10:12 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




about.me :: Dewald Esterhuizen

Dewald Esterhuizen

Blog Stats

  • 172,641 hits

Gravatar :: Dewald Esterhuizen

SoftwareByDefault QR Code

SoftwareByDefault QR Code

I review for the O'Reilly Blogger Review Program

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

Join 152 other followers

Archives

Twitter feed

RSS SoftwareByDefault on MSDN

  • An error has occurred; the feed is probably down. Try again later.

del.icio.us Links

http://softwarebydefault.com
http://softwarebydefault.com
http://softwarebydefault.com
http://softwarebydefault.com
http://softwarebydefault.com

Follow

Get every new post delivered to your Inbox.

Join 152 other followers

%d bloggers like this: