In Focus

How To Make Image Editor Tool In C# - Cropping Image

This article describes how to crop an image in C#. We will implement an image editor tool in C#.

Updated 8/29/2018 - Formatted
 
My last two articles discussed how to load an image in a Windows form and how to resize that image; see this:
 
 
 
Now we will discuss how to crop an image.
 
Design form like this view
 
Cropping1.jpg 
 
In the crop tab there are two buttons; one is "Make selection" and the other is "Ok".
 
For cropping an image we will need to define a region to crop; in this article we will use a rectangle for defining such an area or region.
 
We can click the "MakeSelection" button and then draw a rectangle on the PictureBox with the help of the mouse.
 
Code for draw rectangle
 
Declare some private variables for locating the cursor and defining drawing objects:
  1. int cropX;  
  2. int cropY;  
  3. int cropWidth;  
  4. int cropHeight;  
  5. int oCropX;  
  6. int oCropY;  
  7. public Pen cropPen;  
  8. public DashStyle cropDashStyle = DashStyle.DashDot;  
We will use mouse down and mouse move events for doing this. We will need to implement this code for the mouse down event:
  1. if (e.Button == System.Windows.Forms.MouseButtons.Left)  
  2. {  
  3.     Cursor = Cursors.Cross;  
  4.     cropX = e.X;  
  5.     cropY = e.Y;  
  6.     cropPen = new Pen(Color.Black, 1);  
  7.     cropPen.DashStyle = DashStyle.DashDotDot;  
  8. }  
  9. PictureBox1.Refresh();  
In the above code there are two variables; one is cropX for the x position of the rectangle location and another is cropY for the y position. cropPen is the object of pen class with pensize and pencolor.
 
And write this code on mouse move event:
  1. if (PictureBox1.Image == null)  
  2.     return;  
  3. if (e.Button == System.Windows.Forms.MouseButtons.Left)  
  4. {  
  5.     PictureBox1.Refresh();  
  6.     cropWidth = e.X - cropX;  
  7.     cropHeight = e.Y - cropY;  
  8.     PictureBox1.CreateGraphics().DrawRectangle(cropPen, cropX, cropY, cropWidth, cropHeight);  
  9. }  
On mouse event we can find the cursor position with the help of event arg e so we can easily determine the rectangle's width and height. And use drawrectangle method. In the above code cropPen determines the color, size and other styles of the rectangle, cropx is the x coordinate of the upper left corner of rectangle, y is the y coordinate of the upper left corner of the rectangle and cropWidth and cropHeight are the width and height of the rectangle respectivly.
 
Cropping2.jpg 
 
Code for crop
  1. Cursor = Cursors.Default;  
  2. if (cropWidth < 1)  
  3. {  
  4.     return;  
  5. }  
  6. Rectangle rect = new Rectangle(cropX, cropY, cropWidth, cropHeight);  
  7. //First we define a rectangle with the help of already calculated points  
  8.  Bitmap OriginalImage = new Bitmap(PictureBox1.Image, PictureBox1.Width, PictureBox1.Height);  
  9. //Original image  
  10. Bitmap _img = new Bitmap(cropWidth, cropHeight);  
  11. // for cropinf image  
  12. Graphics g = Graphics.FromImage(_img);  
  13. // create graphics  
  14. g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;  
  15. g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;  
  16.  g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;  
  17. //set image attributes  
  18. g.DrawImage(OriginalImage, 0, 0, rect, GraphicsUnit.Pixel);  
  19. PictureBox1.Image = _img;  
  20. PictureBox1.Width = _img.Width;  
  21. PictureBox1.Height = _img.Height;  
  22. PictureBoxLocation();  
  23. btnCrop.Enabled = false;            
Cropping3.jpg 
 
In the above code I have provided comments for better understanding.
 
So I think now we can crop any image easily with the help of this scenario.