You can skip to the demo by clicking here
You can download the source code by clicking here
Before I get into the fun stuff...the process is really as follows
1 - User crops image on the client-side
2 - Track the X & Y coordinates, as well as the height and width of the box the user drags over the image
3 - Use the server-side code to actually crop the image [providing the coordinates and dimensions from step 2]
It's a slick piece of code - please check out the site for updates (I believe version 2 is a work in progress) and to donate.
As for the .NET code (C#) - you can obtain it from here
You'll need to make sure that you provide write permissions to the directory where you want to save the new, cropped image. Check out line 19, where I set the value for the CROPPED_SAMPLE_PHOTO_URL constant string.
You can see a demo here: http://www.sanjayu.qsh.es/PhotoCropper.aspx
Note: The demo and the download work slightly differently. This is mainly because I'm saving the image to a session variable for the demo, but using the file system in the download.
As for the code, the heart of it is really the CropImageFile method, where you re-draw the image taking into account our coordinates and dimensions.
protected byte CropImageFile(byte imageFile, int targetW, int targetH, int targetX, int targetY)
MemoryStream imgMemoryStream = new MemoryStream();
System.Drawing.Image imgPhoto = System.Drawing.Image.FromStream(new MemoryStream(imageFile));
Bitmap bmPhoto = new Bitmap(targetW, targetH, PixelFormat.Format24bppRgb);
Graphics grPhoto = Graphics.FromImage(bmPhoto);
//Adjust settings to make this as high-quality as possible
grPhoto.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
grPhoto.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
grPhoto.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
grPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, targetW, targetH),
targetX, targetY, targetW, targetH, GraphicsUnit.Pixel);
//Only JPG format for this demo
catch (Exception e)
... //removed code to stay concise