Posts Tagged 'C# GDI'



C# How to: Bitmap Colour Tint

Article Purpose

The purpose of this article is to illustrate the tasks required when implementing a colour tint on a  . The various manipulation operations detailed in this article are all exclusively implemented by processing raw pixel data. No traditional GDI+ drawing operations are required in achieving the objective of this article.

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

Using the sample Application

The sample source code defined by this article creates a , allowing for easily replicating/testing the scenarios illustrated. The Bitmap Tint sample application provides the user with the ability to select a source/input image from browsing the local file system.

The user interface enables the user to apply colour tinting to the selected source image through 3 trackbar controls. Each trackbar control represents a colour component, Red, Green or Blue. Trackbar input translate to a percentage value, where 0% equates to no change and 100% equating to the most possible change.

Modified images can persisted to the local file system through the functionality expressed by the Save Button.

The following image is a screenshot of the Bitmap Tint sample application.


BitmapTint


The ColorTint Extension method

This sample source code that accompanies this article provides the definition of the ColorTint method, an extension method targeting the class. The ColorTint method manipulates pixel colour components directly, processing the Alpha, Red, Green and Blue values expressed in a pixel.

The code snippet below details the implementation of the ColorTint extension method:

 public static Bitmap ColorTint(this Bitmap sourceBitmap, float blueTint,  
                                 float greenTint, float redTint) 
{
    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);
float blue = 0; float green = 0; float red = 0;
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { blue = pixelBuffer[k] + (255 - pixelBuffer[k]) * blueTint; green = pixelBuffer[k + 1] + (255 - pixelBuffer[k + 1]) * greenTint; red = pixelBuffer[k + 2] + (255 - pixelBuffer[k + 2]) * redTint;
if (blue > 255) { blue = 255; }
if (green > 255) { green = 255; }
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; }

In order to manipulate pixel colour component values directly we first need to lock the source into memory by invoking the method. Once the source is locked into memory we can copy the underlying pixel buffer using the method.

The next step involves iterating through the buffer of colour components. Notice how each iteration modifies an entire pixel by iterating by 4. The tint formula can be expressed as follows:

R = R1 + (255 – R1)* RT

G = G1 + (255 – G1)* GT

B = B1 + (255 – B1)* BT

In formula above R1 G1 and B1 represents the original value of a colour component, RT GT and BT in turn represents a colour component tint percentage. Note that tint values are expressed as fractional values. As an example, if the user specified a Blue tint value of 75% on the front end, the value used in the formula equates to 0.75.

Red, Green and Blue colour component values cannot exceed 255 as a result of being values. Before assigning the newly calculated colour component values the source code first determines if calculated values exceed 255. All values exceeding 255 will be set to 255.

The last step performed is to copy the modified pixel buffer into a new object.

Sample Images

The original image has been released under the Creative Commons Attribution 3.0 License. The original image can be downloaded from Wikipedia.

The Original Image

800px-Before-sunrise-perse-rock

Tinted Images

Sunrise1
Sunrise2
Sunrise3
Sunrise4
Sunrise5
Sunrise6

Related Articles

C# How to: Bi-tonal Bitmaps

Article Purpose

The purpose of this article is to explore and illustrate the concept of creating bi-tonal images. Colour images are manipulated in such a fashion to only express two colours. The colours expressed are configurable. A threshold value determines which of the two configured colours will be applied to a pixel.

Bitonal_Banner1

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

Bitonal_Banner2

Using the sample Application

The concepts explored in this article are easily illustrated using the Sample Application provided with the sample source code. The sample application is implemented as a Windows Forms application.

The Bi-tonal Bitmap application enables the user to load an input image file from the local file system. The user interface defines two panels representing the two colours used when creating the resulting bi-tonal . When clicking on either panel the user will be presented with a colour dialog, allowing the user to change the colour of the specific panel.

The user interface also provides a trackbar which allows the user to set the threshold used to calculate if a pixel colour should be set to the dark colour or light colour value.

If the user desires to save resulting bi-tonal images to the local file system the sample application makes provision through the Save Button.

The following image provides a screenshot of the Bi-tonal Bitmap application in action:


BiTonalBitmap_Screenshot


The Bitonal Extension Method

The Bitonal Extension method defines all of the operations involved in creating Bi-tonal images. This method is an extension method targeting the class. Note that the Bitonal extension method manipulates pixel colour components directly, in other words updating a pixel’s Alpha, Red, Green and Blue values directly.

The following code snippet provides the definition of the Bitonal method:

 public static Bitmap Bitonal(this Bitmap sourceBitmap, Color darkColor, 
                                     Color lightColor, int threshold) 
{
    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);
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { if (pixelBuffer[k] + pixelBuffer[k + 1] + pixelBuffer[k + 2] <= threshold) { pixelBuffer[k] = darkColor.B; pixelBuffer[k + 1] = darkColor.G; pixelBuffer[k + 2] = darkColor.R; } else { pixelBuffer[k] = lightColor.B; pixelBuffer[k + 1] = lightColor.G; pixelBuffer[k + 2] = lightColor.R; } }
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; }

In order to manipulate pixel colour component values directly we first need to lock the source into memory by invoking the method. Once the source is locked into memory we can copy the underlying pixel buffer using the method.

The next step involves iterating through the buffer of colour components. Notice how each iteration modifies an entire pixel by iterating by 4. In order to determine to which colour a pixel should be set, the sum of Red, Green and Blue colour components is to the threshold parameter.

The last step performed is to copy the modified pixel buffer into a new object.

Bitonal_Banner1

Sample Images

The original source used to create all of the bi-tonal sample images in this article has been licensed under the Creative Commons Attribution-Share Alike 3.0 Unported, 2.5 Generic, 2.0 Generic and 1.0 Generic license. The original image is attributed to Kenneth Dwain Harrelson and can be downloaded from Wikipedia.

The Original Image


Monarch_In_May


Bi-tonal Images

 

Butterfly1 Butterfly2
Butterfly3 Butterfly4
Butterfly5 Butterfly6
Butterfly7 Butterfly8
Butterfly9 Butterfly10
Butterfly11 Butterfly12

Related Articles

C# How to: Bitmap Colour Balance

Article Purpose

This explores the concept of manipulating the of a  . values are updated by directly manipulating a ’s underlying pixel data, no GDI drawing code required.

Sample source code

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

Download Sample Source Code

Using the sample Application

The concepts explored in this are easily illustrated using the Sample Application provided with the sample source code. The sample application is implemented as a .

The Bitmap Colour Balance application enables the user to load an input image file from the local file system. The user interface provides three trackbar controls representing the colour components Blue, Green and Red. Possible values range from 0 to 255 inclusive. The application performs image filtering on the specified image as the user moves the colour component sliders.

If the user desires to save modified/filtered images to the local file system the sample application makes provision through the Save Button.

The following image provides a screenshot of the Bitmap Colour Balance application in action:


BitmapColorBalance


Colour Balance

Whilst developing the sample source code and writing this I found the article on to be very informative and comprehensive. I would recommend it as a must read for developers with little or no experience around colour representation in digital imaging.

From Wikipedia we get the following quote:

In and , color balance is the global adjustment of the intensities of the colors (typically red, green, and blue ). An important goal of this adjustment is to render specific colors – particularly neutral colors – correctly; hence, the general method is sometimes called gray balance, neutral balance, or white balance. Color balance changes the overall mixture of colors in an image and is used for color correction; generalized versions of color balance are used to get colors other than neutrals to also appear correct or pleasing.

From the quoted text we determine that refers to a method of implementing image filtering as a corrective action when the colours expressed by an image vary from the expected norm.

Literally as the name implies filtering attempts to provide greater balance in image colours. The colours considered to be out of balance with the rest of the image will be filtered out to varying degrees resulting in an image having a more natural appearance.

Accessing Pixel data directly

In this we do not perform traditional drawing operations such as the functionality exposed by the GDI+ Library. We are going to explore the tasks involved in directly accessing and manipulating the pixel buffer data that underlies a object instance. In order for our changes to persist we will also explore the tasks required to re-create an instance of the class and explicitly set/populate pixel data. The tasks referred to are discussed and implemented in the following section.

Locking the bytes inside a Bitmap

In this section we’ll be exploring a brief overview of how to access a ’s underlying array of colour components. Its important to remember that colour components are ordered: Blue, Green, Red, Alpha.

To access a ’s internal array of colour components we make use of the method. From :

Use the method to lock an existing bitmap in system memory so that it can be changed programmatically. You can change the color of an image with the method, although the LockBits method offers better performance for large-scale changes.

The specifies the attributes of the , such as size, pixel format, the starting address of the pixel data in memory, and length of each scan line (stride).

When calling this method, you should use a member of the enumeration that contains a specific bits-per-pixel (BPP) value. Using values such as and will throw an . Also, passing the incorrect pixel format for a bitmap will throw an .

Why lock a in memory? The architecture behind the and memory management through the necessitates locking a in memory before accessing the underlying data. As an application executes periodically the invokes various operations. Part of the ’s function involves relocating objects in memory. As described by :

A garbage collection has the following phases:

  • A marking phase that finds and creates a list of all live objects.

  • A relocating phase that updates the references to the objects that will be compacted.

  • A compacting phase that reclaims the space occupied by the dead objects and compacts the surviving objects. The compacting phase moves objects that have survived a garbage collection toward the older end of the segment.

When locking a through invoking the method you are effectively signalling the to not relocate in memory the being locked. Consider a scenario where, whilst accessing and manipulating a array of colour components, the starts to relocate the associated instance in memory. Without warning the memory being referenced is no longer associated with the object initially referenced.

Note: If you lock a into memory you must also unlock the object by invoking the method.

The method defines a return value of type . Properties exposed by the class to pay attention to: and , as discussed in the following section.

Copying  bytes from a Bitmap

The property is described by as follows:

The stride is the width of a single row of pixels (a scan line), rounded up to a four-byte boundary. If the stride is positive, the bitmap is top-down. If the stride is negative, the bitmap is bottom-up.

In essence a scan line refers to how many are required to represent a row of pixels. A 32 bits per pixel Argb equates to each pixel occupying 4 bytes of memory. The value of the property can be calculated as [Bitmap Width x 4] : rounded up to the first multiple of 4.

Also defined by the class is the property . We can consider a as a grid of rows and columns, essentially a two dimensional array with each element being 1 . The property provides us with how many colour components are expressed by a ’s row of pixels. To determine the total number of colour components expressed by a we simply have to multiply the properties and .

The property, which is of type , is described by as follows:

Gets or sets the address of the first pixel data in the bitmap. This can also be thought of as the first scan line in the bitmap.

We now know the size of the data we want to copy, we also know the address in memory where to start copying a ’s internal colour component array. To perform the actual copy operation we invoke the method.

The ColorBalance Extension method

The crux of this can be found in the ColorBalance extension method. It is only within the ColorBalance method that we will be referencing pixel data directly. Note that this method is defined as an extension method targeting the class.

The ColorBalance method requires 3 parameters. The parameters represent the values to be used in calculating resulting Blue, Green and Red colour component values. The following code snippet details the definition of the ColorBalance method:

 public static Bitmap ColorBalance(this Bitmap sourceBitmap, byte blueLevel,  
                                    byte greenLevel, byte redLevel) 
{ 
     BitmapData sourceData = sourceBitmap.LockBits(new  ectangle (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);
float blue = 0; float green = 0; float red = 0;
float blueLevelFloat = blueLevel; float greenLevelFloat = greenLevel; float redLevelFloat = redLevel;
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { blue = 255.0f / blueLevelFloat * (float )pixelBuffer[k]; green = 255.0f / greenLevelFloat * (float)pixelBuffer[k + 1]; red = 255.0f / redLevelFloat * (float)pixelBuffer[k + 2]; if (blue > 255) {blue = 255;} else if (blue < 0) {blue = 0;} if (green > 255) {green = 255;} else if (green < 0) {green = 0;} if (red > 255) {red = 255;} else if (red < 0) {red = 0;} 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; }

As discussed in previous sections we create an array of and copy the specified object’s underlying values.

The bulk of the work performed by this method happens within the for loop which iterates through the buffer of colour components. Notice how with each loop we increment by 4, the reason being each loop operation modifies 4 at a time. One pixel in terms of the ARGB format equates to 4 , thus each time we loop, we modify 1 pixel.

The formula implemented can be expressed as follows:

R = 255 / Rw * R1

G = 255 / Gw * G1

B = 255 / Bw * B1

Where Rw  Gw and Bw represents the value of a colour component believed to represent White and R1 G1 and B1 representing the original value of a colour component before implementing the colour balance formula.

The value of a colour component can only range between 0 and 255 inclusive. Before setting the newly calculated values we have to check if calculated values range between 0 and 255.

The last operation performed by the ColorBalance Extension method involves creating a new image based on the same size dimensions as the source image. Once the has been locked into memory we copy the modified buffer using the method.

Sample Images

This section illustrates a few scenarios implementing the filter.

Fun Fact: The first image is a photograph I snapped at OR Tambo International Airport, Johannesburg, South Africa. The second photograph I snapped at Hosea Kutako International Airport, Windhoek, Namibia.

The Original Image


Airport_Original1


Colour Balanced Images

 

Airport1 Airport2
Airport3 Airport4
Airport5 Airport6

The Original Image


Airport_Original2


Colour Balanced Images

 

Airport7 Airport8
Airport9 Airport10
Airport11 Airport12

Related Articles

C# How to: Swapping Bitmap ARGB Colour Channels

Article Purpose

The intention of is to explain and illustrate the various possible combinations that can be implemented when swapping the underlying colour channels related to a  image. The concepts explained can easily be replicated by making use of the included sample application.

Sample source code

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

Using the sample Application

The sample application associated with allows the user to select a source image, apply a colour shifting option. The user is provided  with the option to save to disk the resulting new . The below is a screenshot of the Bitmap ARGB Swapping application in action:

SampleAppScreenshot

The scenario illustrated above shows an of flowers being transformed by swapping the underlying colour channels. In this case the ShiftLeft algorithm had been applied. The original is licenced under the , the original image can be downloaded from Wikipedia.

Types of Colour Swapping

The sample source code defines the type ColorSwapType, which represents the possible combinations of colour channel swapping that can be applied to a . The source code extract below provides the definition of the ColorSwapType :

public enum ColorSwapType
{
    ShiftRight,
    ShiftLeft,
    SwapBlueAndRed,
    SwapBlueAndGreen,
    SwapRedAndGreen,
}

When directly manipulating a object’s pixel values an important detail should be noted: Bitmap colour channels in memory are represented in the order Blue, Green, Red and Alpha despite being commonly referred to by abbreviation ARGB!

The following list describes each colour swapping type’s outcome:

  • ShiftRight: Starting at Blue, each colour’s value is set to the colour channel to the right. The value of Blue is applied to Red, Red’s original value applied to Green, Green’s original value applied to Blue.
  • ShiftLeft: Starting at Blue, each colour’s value is set to the colour channel to the left. The value of Blue is applied to Green, Green’s original value applied to Red, Red’s original value applied to Blue.
  • SwapBlueAndRed: The value of the Blue channel is applied to the Red channel and the original value of the Red channel is then applied to the Blue channel. The value of the Green channel remains unchanged.
  • SwapBlueAndGreen: The value of the Blue channel is applied to the Green channel and the original value of the Green channel is then applied to the Blue channel. The value of the Red  channel remains unchanged.
  • SwapRedAndGreen: The value of the Red channel is applied to the Green channel and the original value of the Green channel is then applied to the Red channel. The value of the Blue channel remains unchanged.

The Colour Swap Filter

The sample source code defines the ColorSwapFilter class. This class provides several member properties, which in combination represent the options involved in applying a colour swap filter. The source code snippet below provides the definition of the ColorSwapFilter type:

public class ColorSwapFilter
{
   private ColorSwapType swapType = ColorSwapType.ShiftRight;
   public ColorSwapType SwapType
   {
        get{ return swapType;}
        set{ swapType = value;}
   }

private bool swapHalfColorValues = false; public bool SwapHalfColorValues { get{ return swapHalfColorValues;} set{ swapHalfColorValues = value;} }
private bool invertColorsWhenSwapping = false; public bool InvertColorsWhenSwapping { get{ return invertColorsWhenSwapping;} set{ invertColorsWhenSwapping = value;} }
public enum ColorSwapType { ShiftRight, ShiftLeft, SwapBlueAndRed, SwapBlueAndGreen, SwapRedAndGreen, } }

The member properties defined by the ColorSwapFilter class:

  • Implementing the ColorSwapType discussed earlier, the SwapType member property defines the type of colour channel swapping to apply.
  • Before swapping colour channel values, colour values can be inverted depending on whether InvertColorsWhenSwapping equates to true.
  • In order to reduce the intensity of the resulting image, the SwapHalfColorValues property should be set to true. The end result being destination colour channels are set to 50% of relevant source colour channel values.

Applying the Colour Swap Filter

The sample source code accompanying defines the SwapColorsCopy method, an targeting class. When invoking the SwapColorsCopy extension method, the calling code is required to specify an input and an instance of the ColorSwapFilter class. By virtue of being an the input/source will be specified by the object instance invoking the SwapColorsCopy method.

The source code listing below provides the definition of the SwapColorsCopy .

public static Bitmap SwapColorsCopy(this Bitmap originalImage, ColorSwapFilter swapFilterData)
{
    BitmapData sourceData = originalImage.LockBits
                            (new Rectangle(0, 0, originalImage.Width, originalImage.Height),
                            ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

byte[] resultBuffer = new byte[sourceData.Stride * sourceData.Height]; Marshal.Copy(sourceData.Scan0, resultBuffer, 0, resultBuffer.Length); originalImage.UnlockBits(sourceData);
byte sourceBlue = 0, resultBlue = 0, sourceGreen = 0, resultGreen = 0, sourceRed = 0, resultRed = 0; byte byte2 = 2, maxValue = 255;
for (int k = 0; k < resultBuffer.Length; k += 4) { sourceBlue = resultBuffer[k]; sourceGreen = resultBuffer[k + 1]; sourceRed = resultBuffer[k + 2];
if (swapFilterData.InvertColorsWhenSwapping == true) { sourceBlue = (byte)(maxValue - sourceBlue); sourceGreen = (byte)(maxValue - sourceGreen); sourceRed = (byte)(maxValue - sourceRed); }
if (swapFilterData.SwapHalfColorValues == true) { sourceBlue = (byte)(sourceBlue / byte2); sourceGreen = (byte)(sourceGreen / byte2); sourceRed = (byte)(sourceRed / byte2); }
switch (swapFilterData.SwapType) { case ColorSwapFilter.ColorSwapType.ShiftRight: { resultBlue = sourceGreen; resultRed = sourceBlue; resultGreen = sourceRed; break; } case ColorSwapFilter.ColorSwapType.ShiftLeft: { resultBlue = sourceRed; resultRed = sourceGreen; resultGreen = sourceBlue; break; } case ColorSwapFilter.ColorSwapType.SwapBlueAndRed: { resultBlue = sourceRed; resultRed = sourceBlue; break; } case ColorSwapFilter.ColorSwapType.SwapBlueAndGreen: { resultBlue = sourceGreen; resultGreen = sourceBlue; break; } case ColorSwapFilter.ColorSwapType.SwapRedAndGreen: { resultRed = sourceGreen; resultGreen = sourceGreen; break; } }
resultBuffer[k] = resultBlue; resultBuffer[k + 1] = resultGreen; resultBuffer[k + 2] = resultRed; }
Bitmap resultBitmap = new Bitmap(originalImage.Width, originalImage.Height, PixelFormat.Format32bppArgb); BitmapData resultData = resultBitmap.LockBits (new Rectangle(0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(resultBuffer, 0, resultData.Scan0, resultBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap; }

Due to the architecture and implementation of the .net when manipulating a object’s underlying colour values we need to ensure locking the relevant data buffer in memory. When invoking the class’ method the calling code prevents the from shifting and updating memory references. Once a ’s underlying pixel buffer has been locked in memory the source code creates a data buffer of type byte array and then copies the ’s underlying pixel buffer data.

BitmapData sourceData = originalImage.LockBits
                        (new Rectangle(0, 0, originalImage.Width, originalImage.Height),
                        ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

byte[] resultBuffer = new byte[sourceData.Stride * sourceData.Height]; Marshal.Copy(sourceData.Scan0, resultBuffer, 0, resultBuffer.Length); originalImage.UnlockBits(sourceData);

The sample source code next iterates the pixel buffer array. Notice how the for loop increments by 4 with each loop. Every four elements of the data buffer in combination represents one pixel, each colour channel expressed as a value ranging from 0 to 255 inclusive.

for (int k = 0; k < resultBuffer.Length; k += 4)

If required each colour channel will first be assigned to a value equating to its inverse value by subtracting from 255.

if (swapFilterData.InvertColorsWhenSwapping == true)
{
     sourceBlue = (byte)(maxValue - sourceBlue);
     sourceGreen = (byte)(maxValue - sourceGreen);
     sourceRed = (byte)(maxValue - sourceRed);
}

When the supplied ColorSwapFilter object method parameter defines SwapHalfColorValues as true the source colour value will be divided by 2.

if (swapFilterData.SwapHalfColorValues == true)
{
     sourceBlue = (byte)(sourceBlue / byte2);
     sourceGreen = (byte)(sourceGreen / byte2);
     sourceRed = (byte)(sourceRed / byte2);
}
 

The next section implements a case statement, each option implementing the required colour channel swap algorithm. The last step expressed as part of the for loop results in assigning newly manipulated values to the data buffer.

The SwapColorsCopy extension method can be described as being immutable in the sense that the input value remains unchanged, instead manipulating and returning a copy of the input data. Following the data buffer iteration the sample source creates a new instance of the class and locks it into memory by invoking the method. By implementing the method the source code copies the data buffer to the underlying buffer associated with the newly created object.

 Bitmap resultBitmap = new Bitmap(originalImage.Width, originalImage.Height, 
                                     PixelFormat.Format32bppArgb);
 
BitmapData resultData = resultBitmap.LockBits (new Rectangle(0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(resultBuffer, 0, resultData.Scan0, resultBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap;

The implementation: a

The sample source code accompanying defines a , the intention of which being to illustrate a test implementation. The following series of images were created using the sample application:

The source/input image is licenced under the , the original image can be downloaded from Wikipedia.

The Original Image

800px-HK_Sheung_Wan_Hollywood_Road_Park_Flowers_in_Purple

The ShiftLeft Colour Swapping algorithm:

ShiftLeft

Inverted:

ShiftLeft_inverted

The ShiftRight Colour Swapping algorithm:

ShiftRight

Inverted:

ShiftRight_inverted

The SwapBlueAndGreen Colour Swapping algorithm:

SwapBlueAndGreen

Inverted:

SwapBlueAndGreen_inverted

The SwapBlueAndRed Colour Swapping algorithm:

SwapBlueAndRed

Inverted:

SwapBlueAndRed_inverted

The SwapRedAndGreen Colour Swapping algorithm:

SwapRedAndGreen

Inverted:

SwapRedAndGreen_inverted

Related Articles and Feedback

Feedback and questions are always encouraged. If you know of an alternative implementation or have ideas on a more efficient implementation please share in the comments section.

I’ve published a number of articles related to imaging and images of which you can find URL links here:

C# How to: Generating Icons from Images

Article Purpose

This illustrates the process of generating files (*.ico) from user specified input . The accompanying Sample Source Code implements a , allowing for easily testing the generation process.

Sample source code

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

Using the sample Application

The Sample Application can be used to test/implement the concepts described in this . The user interface enables the user to browse and select an file from the file system, which loads as a scaled preview. In addition, the user can select an size from a list of standard dimensions: 16×16, 24×24, 32×32, 48×48, 64×64, 96×96 and 128×128 pixels. When a user clicks on the “Save Icon” button the sample application generates an in memory based on the specified size converting and scaling the provided input . If an was successfully generated, the in-memory representation will be saved to the file system, based on the filename and file path specified by the user.

The image below is screenshot of the Image to Icon Generator application in action:

Image To Icon Generator

The source features Bellis perennis also known as the common European Daisy (see Wikipedia). The file is licensed under the Creative Commons Attribution-Share Alike 2.5 Generic license. The original can be downloaded from .

The resulting file generated by the sample application:

Generating Icons from Images

Scaling and Aspect Ratio

conform to a set of standard dimensions, all of which equate to a square due to the width and height values being equal. A potential issue exists in that the specified source might not have exact square dimensions. In other words, the width and height values of specified source might differ. The solution lies in creating a square based on the specified source . Consider the concept of a square canvas onto which is drawn the source whilst maintaining its aspect ratio, implementing center alignment from the horizontal and vertical aspect. Listed below is the implementation of an defined as CopyToSquareCanvas, targeting the class.

public static Bitmap CopyToSquareCanvas(this Bitmap sourceBitmap, Color canvasBackground)
{
    int maxSide = sourceBitmap.Width > sourceBitmap.Height ? sourceBitmap.Width : sourceBitmap.Height;

Bitmap bitmapResult = new Bitmap(maxSide, maxSide, PixelFormat.Format32bppArgb);
using (Graphics graphicsResult = Graphics.FromImage(bitmapResult)) { graphicsResult.Clear(canvasBackground);
int xOffset = (sourceBitmap.Width - maxSide) / 2; int yOffset = (sourceBitmap.Height - maxSide) / 2;
graphicsResult.DrawImage(sourceBitmap, new Point(xOffset, xOffset)); }
return bitmapResult; }

The size of the resulting is determined by the source ’s longest side, either width or height. To ensure middle alignment both vertically and horizontally the source is drawn at an offset, determined by the additional buffer area added by the canvas.

Generating the Icon

Once we have created an conforming to exact square dimensions the next step would be to scale said to the desired size. A convenient method of quickly scaling source to icon dimensions comes in the form of creating .

The sample source code defines the enumeration IconSizeDimensions, which serves to provide a developer friendly reference coupled with actual dimension values by means of specifying explicit enumeration values. Consider the following code snippet:

public enum IconSizeDimensions
{
    IconSize16x16Pixels = 16,
    IconSize24x24Pixels = 24,
    IconSize32x32Pixels = 32,
    IconSize48x48Pixels = 48,
    IconSize64x64Pixels = 64,
    IconSize96x96Pixels = 96,
    IconSize128x128Pixels = 128
}

The crux of this and sample source code can considered to be the definition of the CreateIcon , which targets the class. The definition is as follows:

public static Icon CreateIcon(this Bitmap sourceBitmap, IconSizeDimensions iconSize)
{
    Bitmap squareCanvas = sourceBitmap.CopyToSquareCanvas(Color.Transparent);
    squareCanvas = (Bitmap)squareCanvas.GetThumbnailImage((int)iconSize, (int)iconSize, null, new IntPtr());

Icon iconResult = Icon.FromHandle(squareCanvas.GetHicon());
return iconResult; }

As discussed the first step is to ensure that the source conforms to square dimensions, implemented here by invoking the CopyToSquareCanvas . Next the source code implements scaling by creating a of which the size is based on the specified IconSizeDimensions value. The method returns a handle to an in the form of an , which serves as a parameter to the static method, which returns an instance of the class.

The Implementation

When the user clicks the “Save” button the Sample Application will present the user with a file save dialog. After the user specifies a file name and file path the Sample Application creates a reference of the source by casting the picturebox’s property to type .

private void btnSaveIcon_Click(object sender, EventArgs e)
{
    if (picSource.Image != null)
    {
        SaveFileDialog sfd = new SaveFileDialog();
        sfd.Title = "Specify a file name and file path";
        sfd.Filter = "Icon Files(*.ico)|*.ico"; 
if (sfd.ShowDialog() == System.Windows.Forms.DialogResult.OK) { System.Drawing.Icon tempIcon = ((Bitmap)picSource.Image).CreateIcon( (IconSizeDimensions)cmbIconSize.SelectedItem);
using (StreamWriter streamWriter = new StreamWriter(sfd.FileName, false)) { tempIcon.Save(streamWriter.BaseStream);
streamWriter.Flush(); streamWriter.Close(); } } } }

When the CreateIcon is invoked, the dimensions selected through the user interface will be passed as a parameter. The last step performed involves persisting the in-memory data to the file system.


Dewald Esterhuizen

Blog Stats

  • 735,743 hits

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

Join 223 other followers

Archives

Twitter feed


%d bloggers like this: