Develop Application to Pick Objects from Images based on colors using basic Windows Form and C# programming

Hello Friends, Today let’s see how we can create an image picker application which will help to pick objects from images based on color selection step by step using Windows Form and C# DotNet in Visual Studio.

Download the source code of the Image Picker Application

Prerequisites

•  Basic c# programming knowledge
• Basic windows form application development knowledge 
• Visual studio 2010+  

Step 1.

Start a new Windows Form Project in Visual Studio which will provide you the default form template. Then add the following controls into the form.

• Two picture boxes (for showing in & out images)
• Two buttons to open and save images
• Two buttons for showing the last picked color and add selection into the out image
• One tracker for setting the range for color selection

Step 2.

Now Let’s add open image button click event (You create the button click event just by double clicking the button in the form template or from the properties/events box)

  Copy Code

Bitmap baseImage;
Bitmap outImage;
private void openImageButton_Click(object sender, EventArgs e)
{
    var openFileDialog = new OpenFileDialog();
    openFileDialog.ShowDialog();

    baseImage = new Bitmap(openFileDialog.FileName);

    // Resize the image to fit in the picturebox
    baseImage = new Bitmap(baseImage, pictureBox1.Width, pictureBox1.Height);
            
    pictureBox1.Image = baseImage;

    // Create outImage with same base image size to store the output
    outImage = new Bitmap(baseImage.Width, baseImage.Height);
    var g = Graphics.FromImage(outImage);
    // Fill the outImage with white color
    g.FillRectangle(Brushes.White, 0, 0, outImage.Width, outImage.Height);
}

We have code to show the open file dialogue in the button click event, create image from the opened file location and show the image in the picture box.

Step 3.

Now Let’s add mouse click event for the picture box (right click on the picture box à select properties à events à double click on the Mouse click event field)

Let’s add code to get the color from the clicked location, show the color in the color button, get all the pixels from the base image which is close to the picked color based on the range set, draw these pixels in the working image (not the out image) and show the working image in the second picture box.

  Copy Code

Bitmap workingImage;
Color pickColour;
private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
    // Get the color of image in the mouse clicked location
    pickColour = Color.FromArgb(baseImage.GetPixel(e.X, e.Y).ToArgb());

    drawIntoWorkingImage();
}

private void drawIntoWorkingImage()
{
    workingImage = new Bitmap(outImage);
                        
    var range = trackBar1.Value;

    colorButton.BackColor = pickColour;

    // Compare all the pixels in the image with the picked color 
    for (int i = 0; i < baseImage.Width; i++)
    {
        for (int j = 0; j < baseImage.Height; j++)
        {
            var pixel = baseImage.GetPixel(i, j);

            // if the difference of the picked color and current pixel comes in range 
            if (pixel.R - pickColour.R > -range && pixel.R - pickColour.R < range
                && pixel.G - pickColour.G > -range && pixel.G - pickColour.G < range
                && pixel.B - pickColour.B > -range && pixel.B - pickColour.B < range)
            {
                workingImage.SetPixel(i, j, pixel);
            }
        }
    }

    pictureBox2.Image = workingImage;
}

Let’s run the application to see if the selection works

Step 4.

Add code to do the selection on the range selection (tracker scroll)

  Copy Code

private void trackBar1_Scroll(object sender, EventArgs e)
{
    drawIntoWorkingImage();
}

Add code to move the working image into the out image.

  Copy Code

private void AddToOutbutton_Click(object sender, EventArgs e)
{
    outImage = new Bitmap(workingImage);
}

Let’s run the application and see if the new changes really work.

Step 5.

Let’s add save button click event (by simply double click on the save button or through the properties window)

  Copy Code

private void saveOutButton_Click(object sender, EventArgs e)
{
    var saveFileDialog = new SaveFileDialog();
    saveFileDialog.ShowDialog();

    outImage.Save(saveFileDialog.FileName + ".jpeg", ImageFormat.Jpeg);
}

We have code to show the save file dialogue and save the out image in to file in the save button click event.

Let’s run the application and see if saving image really works.

 Let's open the final saved image file in image viewer.  

You can try the application with high quality images which would give better output.

Download the source code of the Image Picker Application

Enjoy Coding…!!!