In my first article I discussed how to split the three color components of an image using C#, in addition to converting the colors from RGB to Gray Scale. In this article We will build our color selector that gets the coordinates of the point inside the image, and the 3 three color components of the point.

Lets start with creating a new window forms project, then place a picture box and place 8 labels in the main form. 4 labels for the items for the data headers, and 4 for the data display. Select an image to be loaded in the picture box.

right Click on the picture box and in then select properties then the events, and double click on "MouseMove" this will make an event when a mouse moves over the picture box.

Notice the function created 
 private void pictureBox1_MouseMove(object sender, MouseEventArgs e)

MouseEventArgs e holds attributes concerning the Mouse Position in the image box.

Put this part a side, and lets the function that will display the color coordinates, given the coordinates of the selected point. Simply this function takes image from the picture box, and gets a the given point from the extracted image, then displays the coordinates and the color components in the labels.

Here is my code:

 public void PrintColorComponents(int x,int y)
        {
           Bitmap image = new Bitmap(pictureBox1.Image);
           lbCoordinates.Text = x.ToString() + "," + y.ToString();
           Color color = image.GetPixel(x, y);
           lbRed.Text = color.R.ToString();
           lbGreen.Text = color.G.ToString();
           lbBlue.Text = color.B.ToString();
            
        }

Lets go back to the Mouse Move event function. Call inside it the function PrintColorComponents and give it the following parameters, e.X, and e.Y which are the location of the cursor inside the picture box.
  private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            
            PrintColorComponents(e.X,e.Y);
        }

Then Run the program; Here is a screen shot of mine.
Articel2-ScreenShot.jpg
()

Attached is the sample program.

In the next article we will learn how to change the background of an image, for instance replacing the white background of my picture with evil tower, as if I took it in Paris!!!

Feel free to contact me.