Homepage image
Sample of the Day RSS Feed

Sample Downloads: http://code.msdn.microsoft.com/CSWinFormCropImage-d4beb1fa

Today’s sample demonstrates how to crop the image from specific Picturebox control into destination Picturebox control using mouse selection or specified coordinates.

The sample was written by Microsoft engineer: Sagar Bhanudas Joshi

imageYou can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage http://1code.codeplex.com/.

 

Introduction

The sample demonstrates how to crop the image from specific Picturebox control into destination Picturebox control using mouse selection or specified coordinates.

  • How to use mouse to select an area (rectangle) in a Picturebox control.
  • How to crop the image by the rectangle.

 

Building the Sample

  1. The main aim of the sample is to have a focused rectangle for selection of area on the source image.  The code in the KB - http://support.microsoft.com/kb/314945 - explains it well how it can be achieved with some modifications.
  2. We change the mouse cursor style to “Cross” when on source picture box.
  3. After a user selects the area on the image to be cropped, we create a Rectangle that is used to draw the new cropped image (Zoomed) on the target picture box.
  4. We achieve this drawing using the Graphics object and overload of the Graphics.DrawImage() method.
  5. The image in the source picture box can also be cropped by specifying coordinates in the form of X1, Y1, X2, Y2 in a text box.
  6. In both cropping approaches, we modify the RectCropArea variable.

 

Running the Sample

  1. Open the “CSWinformsCropImageSample.sln” file in Visual Studio 2010.
  2. Run the sample.
  3. Select the area to be cropped on the source image picture box using mouse.
  4. When selected, click the crop button.
  5. The resulting cropped image appears in the target picture box in zoomed view.
  6. Alternative, if you can specify the coordinates in a text for the area to be cropped.

 

Using the Code

The following code snippet handles the mouse down event.

private void SrcPicBox_MouseDown(object sender, MouseEventArgs e) 
{ 
    // Make a note that we "have the mouse". 
    bHaveMouse = true; 
  
    // Store the "starting point" for this rubber-band rectangle. 
    ptOriginal.X = e.X; 
    ptOriginal.Y = e.Y; 
  
    // Special value lets us know that no previous 
    // rectangle needs to be erased. 
  
    // Display coordinates 
    lbCordinates.Text = "Coordinates  :  " + e.X.ToString() + ", " + e.Y.ToString(); 
  
    ptLast.X = -1; 
    ptLast.Y = -1; 
     
    rectCropArea = new Rectangle(new Point(e.X, e.Y), new Size()); 
} 

The following code snippet handles the mouse up event.

private void SrcPicBox_MouseUp(object sender, MouseEventArgs e) 
{ 
    // Set internal flag to know we no longer "have the mouse". 
    bHaveMouse = false; 
  
    // If we have drawn previously, draw again in that spot 
    // to remove the lines. 
    if (ptLast.X != -1) 
    { 
        Point ptCurrent = new Point(e.X, e.Y); 
        
        // Display coordinates 
        lbCordinates.Text = "Coordinates  :  " + ptOriginal.X.ToString() + ", " +  
            ptOriginal.Y.ToString()+ " And " + e.X.ToString() + ", " + e.Y.ToString(); 
  
    } 
  
    // Set flags to know that there is no "previous" line to reverse. 
    ptLast.X = -1; 
    ptLast.Y = -1; 
    ptOriginal.X = -1; 
    ptOriginal.Y = -1; 
     
} 

The following code snippet handles the mouse move event.

private void SrcPicBox_MouseMove(object sender, MouseEventArgs e) 
{ 
    Point ptCurrent = new Point(e.X, e.Y); 
  
    // If we "have the mouse", then we draw our lines. 
    if (bHaveMouse) 
    { 
        // If we have drawn previously, draw again in 
        // that spot to remove the lines. 
        if (ptLast.X != -1) 
        { 
            // Display Coordinates 
            lbCordinates.Text = "Coordinates  :  " + ptOriginal.X.ToString() + ", " +  
                ptOriginal.Y.ToString() + " And " + e.X.ToString() + ", " + e.Y.ToString(); 
        } 
  
        // Update last point. 
        ptLast = ptCurrent; 
  
        // Draw new lines. 
  
        // e.X - rectCropArea.X; 
        // normal 
        if (e.X > ptOriginal.X && e.Y > ptOriginal.Y) 
        { 
            rectCropArea.Width = e.X - ptOriginal.X; 
  
            // e.Y - rectCropArea.Height; 
            rectCropArea.Height = e.Y - ptOriginal.Y; 
        } 
        else if (e.X < ptOriginal.X && e.Y > ptOriginal.Y) 
        { 
            rectCropArea.Width = ptOriginal.X - e.X; 
            rectCropArea.Height = e.Y - ptOriginal.Y; 
            rectCropArea.X = e.X; 
            rectCropArea.Y = ptOriginal.Y; 
        } 
        else if (e.X > ptOriginal.X && e.Y < ptOriginal.Y) 
        { 
            rectCropArea.Width = e.X - ptOriginal.X; 
            rectCropArea.Height = ptOriginal.Y - e.Y; 
  
            rectCropArea.X = ptOriginal.X; 
            rectCropArea.Y = e.Y; 
        } 
        else 
        { 
            rectCropArea.Width = ptOriginal.X - e.X; 
  
            // e.Y - rectCropArea.Height; 
            rectCropArea.Height = ptOriginal.Y - e.Y; 
            rectCropArea.X = e.X; 
            rectCropArea.Y = e.Y; 
        } 
        SrcPicBox.Refresh(); 
    } 
} 

The following code snippet handles the BtnCrop click event.

private void BtnCrop_Click(object sender, EventArgs e) 
{ 
    TargetPicBox.Refresh(); 
    Bitmap sourceBitmap = new Bitmap(SrcPicBox.Image, SrcPicBox.Width, SrcPicBox.Height);  
    Graphics g = TargetPicBox.CreateGraphics(); 
    if (chkCropCordinates.Checked) 
    { 
        lbCordinates.Text = ""; 
        string[] cordinates = tbCordinates.Text.ToString().Split(','); 
        int cord0, cord1, cord2, cord3; 
  
        try 
        { 
            cord0 = Convert.ToInt32(cordinates[0]); 
            cord1 = Convert.ToInt32(cordinates[1]); 
            cord2 = Convert.ToInt32(cordinates[2]); 
            cord3 = Convert.ToInt32(cordinates[3]); 
        } 
        catch (Exception ex) 
        { 
            lbCordinates.Text = ex.Message; 
            return; 
        } 
  
        if((cord0 < cord2 && cord1 <cord3)) 
        { 
            rectCropArea = new Rectangle(cord0, cord1, cord2 - cord0, cord3 - cord1); 
        } 
        else if (cord2 < cord0 && cord3 > cord1) 
        { 
            rectCropArea = new Rectangle(cord2, cord1, cord0 - cord2, cord3 - cord1); 
        } 
        else if (cord2 > cord0 && cord3 < cord1) 
        { 
            rectCropArea = new Rectangle(cord0, cord3, cord2 - cord0, cord1 - cord3); 
        } 
        else 
        { 
            rectCropArea = new Rectangle(cord2, cord3, cord0 - cord2, cord1 - cord3); 
        } 
    } 
    g.DrawImage(sourceBitmap, new Rectangle(0, 0, TargetPicBox.Width, TargetPicBox.Height),  
        rectCropArea, GraphicsUnit.Pixel); 
    sourceBitmap.Dispose();  
}