The program uses three Bitmap objects to hold different copies of the current image.
// The original image. private Bitmap OriginalImage; // The currently cropped image. private Bitmap CroppedImage; // The cropped image with the selection rectangle. private Bitmap DisplayImage; private Graphics DisplayGraphics;
OriginalImage holds the image originally loaded from the file.
CroppedImage holds the currently displayed bitmap as cropped without the selection rectangle.
DisplayImage holds the current image with the selection rectangle. DisplayGraphics is a Graphics object for drawing on DisplayImage. The program uses it to draw the selection rectangle.
The following code shows how the program lets you select an area.
// Let the user select an area.
private bool Drawing = false;
private Point StartPoint, EndPoint;
private void picCropped_MouseDown(object sender, MouseEventArgs e)
{
Drawing = true;
StartPoint = e.Location;
// Draw the area selected.
DrawSelectionBox(e.Location);
}
private void picCropped_MouseMove(object sender, MouseEventArgs e)
{
if (!Drawing) return;
// Draw the area selected.
DrawSelectionBox(e.Location);
}
private void picCropped_MouseUp(object sender, MouseEventArgs e)
{
if (!Drawing) return;
Drawing = false;
// Crop.
// Get the selected area's dimensions.
int x = Math.Min(StartPoint.X, EndPoint.X);
int y = Math.Min(StartPoint.Y, EndPoint.Y);
int width = Math.Abs(StartPoint.X - EndPoint.X);
int height = Math.Abs(StartPoint.Y - EndPoint.Y);
Rectangle source_rect = new Rectangle(x, y, width, height);
Rectangle dest_rect = new Rectangle(0, 0, width, height);
// Copy that part of the image to a new bitmap.
DisplayImage = new Bitmap(width, height);
DisplayGraphics = Graphics.FromImage(DisplayImage);
DisplayGraphics.DrawImage(CroppedImage,
dest_rect, source_rect, GraphicsUnit.Pixel);
// Display the new bitmap.
CroppedImage = DisplayImage;
DisplayImage = CroppedImage.Clone() as Bitmap;
DisplayGraphics = Graphics.FromImage(DisplayImage);
picCropped.Image = DisplayImage;
picCropped.Refresh();
}
The MouseDown event handler saves the starting point, sets Drawing = true, and calls DrawSelectionBox. The MouseMove event handler updates the mouse’s current point and calls DrawSelectionBox to update the selection box.
The MouseUp event handler finds the selected area. It makes a new Bitmap to fit the selected area and copies the selected part of the previous version of the image into the new bitmap. It then updates DisplayImage and CroppedImage.
This example uses code from the examples:
- Load images without locking their files in C#
- Save images with an appropriate format depending on the file name’s extension in C#
![[Essential Algorithms, Second Edition]](http://www.csharphelper.com/essential_algs_2e_158_200.jpg)
![[WPF 3d, Three-Dimensional Graphics with WPF and C#]](http://www.csharphelper.com/wpf3d_160_200.png)
![[The C# Helper Top 100]](http://www.csharphelper.com/top100_161_200.png)
![[Interview Puzzles Dissected]](http://www.csharphelper.com/interview_puzzles_161_200.jpg)
You’re right. Sorry about that.
You forgot this function:
// Draw the area selected. private void DrawSelectionBox(Point end_point) { // Save the end point. EndPoint = end_point; if (EndPoint.X < 0) EndPoint.X = 0; if (EndPoint.X >= CroppedImage.Width) EndPoint.X = CroppedImage.Width - 1; if (EndPoint.Y < 0) EndPoint.Y = 0; if (EndPoint.Y >= CroppedImage.Height) EndPoint.Y = CroppedImage.Height - 1; // Reset the image. DisplayGraphics.DrawImageUnscaled(CroppedImage, 0, 0); // Draw the selection area. int x = Math.Min(StartPoint.X, EndPoint.X); int y = Math.Min(StartPoint.Y, EndPoint.Y); int width = Math.Abs(StartPoint.X - EndPoint.X); int height = Math.Abs(StartPoint.Y - EndPoint.Y); DisplayGraphics.DrawRectangle(Pens.Red, x, y, width, height); picCropped.Refresh(); }How can we use the application in zoom mode?
You would have to do a bit more work. Probably the best approach would be to make the program create a scaled bitmap and work with that. You might want to not smooth the result so it looks pixellated and the user can see exactly which pixels are selected. You could also snap the selection box to integral pixel locations to make it easier to tell exactly which pixels are being selected.
After the user selects an area, you would un-scale the coordinates selected to get back to the original image’s coordinates. Then you could copy the selected area as before.
Snapping the selection rectangle and un-scaling the selected area would be a bit tricky because you’d probably want to make the rectangle’s edges lie between the enlarged pixels.
Photos application does not work in preview mode. How can we make it?
I don’t understand your question. Can you give me more information?
How can we do the picturebox size mode: StretImage to then cutting images?
Example Image Link: http://www.medikalcin.net/abort.png
I’ll see if I can put together an example in the next week or so. (You still won’t be able to read that example image, though, because it’s too small. If you enlarge it, you’ll just get a fuzzy result.)
See this example:
Zoom and crop a picture in C#
Still works in VS2015, tested at the time of writing. VS2015 converts it to a project for the latest version first though.
I usually save projects for Visual Studio 2008 because they should be compatible with later versions. Once you open them in a newer version, however, they are converted and you can’t go back.
How can i crop a selected area and divide it in 30 equal parts like 10 rows and 3 columns and save these 30 images separately in a folder
thanks in advance
Take a look at this post:
Split image files in C#
Sorry but the DrawSelectionBox function is not working on my project. I copied the code from the comment section and is throwing me NullExeptions. What I’m suposed to do?
The problem is with that DisplayGraphics.
DisplayGraphics is a Graphics object that represents the image that will show the cropped area. If that value isn't set, then you would get a NullException.
My guess is that you're missing some other part of the program that sets DisplayGraphics. Note that the post only describes the key pieces of the program and that some parts are not shown in the text. Click the Download button to download the complete project and see what else is in it.
The application is changing the size of my original image. How can I have it keep the original size without changing it and making it smaller?
I don’t think it is changing the original image. The program saves the original image in case it needs it later. When you click and drag, it displays the area that you selected. That area will be smaller than the original image because it’s just part of it.
If you use the Picture menu’s Reset command, you can restore the original image.