C# How to: Bitmap Colour Substitution implementing thresholds

Article Purpose

This article is aimed at detailing how to implement the process of substituting the colour values that form part of a Bitmap image. Colour substitution is implemented by means of a threshold value. By implementing a threshold a range of similar colours can be substituted.

Sample source code

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

Using the sample Application

The provided sample source code builds a Windows Forms application which can be used to test/implement the concepts described in this article. The sample application enables the user to load an image file from the file system, the user can then specify the colour to replace, the replacement colour and the threshold to apply. The following image is a screenshot of the sample application in action.

The scenario detailed in the above screenshot shows the sample application being used to create an image where the sky has more of a bluish hue when compared to the original image.

Notice how replacement colour does not simply appear as a solid colour applied throughout. The replacement colour gets implemented matching the intensity of the colour being substituted.

The colour filter options:

The colour to replace was taken from the original image, the replacement colour is specified through a colour picker dialog. When a user clicks on either image displayed, the colour of the image pixel clicked on sets the value of the replacement colour. By adjusting the threshold value the user can specify how wide or narrow the range of colours to replace should be. The higher the threshold value, the wider the range of colours that will be replaced.

The resulting image can be saved by clicking the “Save Result” button. In order to apply another colour substitution on the resulting image click the button labelled “Set Result as Source”.

Colour Substitution Filter Data

The sample source code provides the definition for the ColorSubstitutionFilter class. The purpose of this class is to contain data required when applying colour substitution. The ColorSubstitutionFilter class is defined as follows:

public class ColorSubstitutionFilter
{
    private int thresholdValue = 10;
    public int ThresholdValue
    {
        get { return thresholdValue; }
        set { thresholdValue = value; }
    }

 
    private Color sourceColor = Color.White;
    public Color SourceColor
    {
        get { return sourceColor; }
        set { sourceColor = value; }
    }

 
    private Color newColor = Color.White;
    public Color NewColor
    {
        get { return newColor; }
        set { newColor = value; }
    }
}

To implement a colour substitution filter we first have to create an object instance of type ColorSubstitutionFilter. A colour substitution requires specifying a SourceColor, which is the colour to replace/substitute and a NewColour, which defines the colour that will replace the SourceColour. Also required is a ThresholdValue, which determines a range of colours based on the SourceColor.

Colour Substitution implemented as an Extension method

The sample source code defines the ColorSubstitution extension method which targets the Bitmap class. Invoking the ColorSubstitution extension method requires passing a parameter of type ColorSubstitutionFilter, which defines how colour substitution is to be implemented. The following code snippet contains the definition of the ColorSubstitution method.

public static Bitmap ColorSubstitution(this Bitmap sourceBitmap, ColorSubstitutionFilter filterData)
{
    Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height, PixelFormat.Format32bppArgb);

 
    BitmapData sourceData = sourceBitmap.LockBits(new Rectangle(0, 0, sourceBitmap.Width, sourceBitmap.Height),
                                                  ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);
    BitmapData resultData = resultBitmap.LockBits(new Rectangle(0, 0, resultBitmap.Width, resultBitmap.Height),
                                                  ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);

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

 
    sourceBitmap.UnlockBits(sourceData);

 
    byte sourceRed = 0, sourceGreen = 0, sourceBlue = 0, sourceAlpha = 0;
    int resultRed = 0, resultGreen = 0, resultBlue = 0;

 
    byte newRedValue = filterData.NewColor.R;
    byte newGreenValue = filterData.NewColor.G;
    byte newBlueValue = filterData.NewColor.B;

 
    byte redFilter = filterData.SourceColor.R;
    byte greenFilter = filterData.SourceColor.G;
    byte blueFilter = filterData.SourceColor.B;

 
    byte minValue = 0;
    byte maxValue = 255;

 
    for (int k = 0; k < resultBuffer.Length; k += 4)
   {
        sourceAlpha = resultBuffer[k + 3];

 
        if (sourceAlpha != 0)
       {
            sourceBlue = resultBuffer[k];
            sourceGreen = resultBuffer[k + 1];
            sourceRed = resultBuffer[k + 2];

 
            if ((sourceBlue < blueFilter + filterData.ThresholdValue &&
                    sourceBlue > blueFilter - filterData.ThresholdValue) &&

 
                (sourceGreen < greenFilter + filterData.ThresholdValue &&
                    sourceGreen > greenFilter - filterData.ThresholdValue) &&

 
                (sourceRed < redFilter + filterData.ThresholdValue &&
                    sourceRed > redFilter - filterData.ThresholdValue))
           {
                resultBlue = blueFilter - sourceBlue + newBlueValue;

 
                if (resultBlue > maxValue)
               { resultBlue = maxValue;}
                else if (resultBlue < minValue)
               { resultBlue = minValue;}

 
                resultGreen = greenFilter - sourceGreen + newGreenValue;

 
                if (resultGreen > maxValue)
               { resultGreen = maxValue;}
                else if (resultGreen < minValue)
               { resultGreen = minValue;}

 
                resultRed = redFilter - sourceRed + newRedValue;

 
                if (resultRed > maxValue)
               { resultRed = maxValue;}
                else if (resultRed < minValue)
               { resultRed = minValue;}

 
                resultBuffer[k] = (byte)resultBlue;
                resultBuffer[k + 1] = (byte)resultGreen;
                resultBuffer[k + 2] = (byte)resultRed;
                resultBuffer[k + 3] = sourceAlpha;
           }
       }
   }

 
    Marshal.Copy(resultBuffer, 0, resultData.Scan0, resultBuffer.Length);
    resultBitmap.UnlockBits(resultData);

 
    return resultBitmap;
}

The ColorSubstitution method can be labelled as immutable due to its implementation. Being immutable implies that the source/input data will not be modified, instead a new instance will be created reflecting the source data as modified by the operations performed in the particular method.

The first statement defined in the ColorSubstitution method body instantiates an instance of a new Bitmap, matching the size dimensions of the source Bitmap object. Next the method invokes the Bitmap.LockBits method on the source and result Bitmap instances. When invoking Bitmap.LockBits the underlying data representing a Bitmap will be locked in memory. Being locked in memory can also be described as signalling/preventing the Garbage Collector to not move around in memory the data being locked. Invoking Bitmap.UnlockBits results in the Garbage Collector functioning as per normal, moving data in memory and updating the relevant memory references when required.

The source code continues by copying all the bytes representing the source Bitmap to an array of bytes that represents the resulting Bitmap. At this stage the source and result Bitmaps are exactly identical and as yet unmodified. In order to determine which pixels based on colour should be modified the source code iterates through the byte array associated with the result Bitmap.

Notice how the for loop increments by 4 with each loop. The underlying data represents a 32 Bits per pixel Argb image, which equates to 8 bits/1 byte representing an individual colour component, either Alpha, Red, Green or Blue. Defining the for loop to increment by 4 results in each loop iterating 4 bytes or 32 bits, in essence 1 pixel.

Within the for loop we determine if the colour expressed by the current pixel adjusted by the threshold value forms part of the colour range that should be updated. It is important to remember that an individual colour component is a byte value and can only be set to a value between 0 and 255 inclusive.

The Implementation

The ColorSubstitution method is implemented by the sample source code through a Windows Forms application. The ColorSubstitution method requires that the source Bitmap specified must be formatted as a 32 Bpp Argb image. When the user loads a source image from the file system the sample application attempts to convert the selected image file by invoking the extension method Format32bppArgbCopy which targets the Bitmap class. The definition is as follows:

public static Bitmap Format32bppArgbCopy(this Bitmap sourceBitmap)
{
    Bitmap copyBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height, PixelFormat.Format32bppArgb);

             
    using (Graphics graphicsObject = Graphics.FromImage(copyBitmap))
    {
        graphicsObject.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
        graphicsObject.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        graphicsObject.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
        graphicsObject.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

                 
        graphicsObject.DrawImage(sourceBitmap, new Rectangle(0, 0, sourceBitmap.Width, sourceBitmap.Height),
         new Rectangle(0, 0, sourceBitmap.Width, sourceBitmap.Height), GraphicsUnit.Pixel);
    }

 
    return copyBitmap;
}

Colour Substitution Examples

The following section illustrates a few examples of colour substitution result images. The source image features Bellis perennis also known as the common European Daisy (see Wikipedia). The image file is licensed under the Creative Commons Attribution-Share Alike 2.5 Generic license. The original image can be downloaded here. The following image is a scaled down version of the original:

Light Blue Colour Substitution

Colour Component	Source Colour	Substitute Colour
Red	255	121
Green	223	188
Blue	224	255

Medium Blue Colour Substitution

Colour Component	Source Colour	Substitute Colour
Red	255	34
Green	223	34
Blue	224	255

Medium Green Colour Substitution

Colour Component	Source Colour	Substitute Colour
Red	255	0
Green	223	128
Blue	224	0

Purple Colour Substitution

Colour Component	Source Colour	Substitute Colour
Red	255	128
Green	223	0
Blue	224	255

Software by Default