Sanjay Uttam

You can skip to the demo by clicking here
You can download the source code by clicking here

For my current project I needed to create some logic for users to upload an image...only problem was the image had to be of a fixed size, and therefore aspect ratio.  Enter the need for an image cropper.  You've seen them before on a number of sites, like linkedIn, facebook, and everywhere else.  I began my journey of trying to find one.  There are a fair amount of tutorials/code snippets on the web that illustrate how to do this from the client-side using JavaScript.  I also came across some articles on codeProject and such as that explained how to crop images on the server-side.  What I couldn't find was an article that tied the client-side JavaScript and the server-side cropping together.  And that's exactly what this article is.

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]

That's really about it.  I should also say that all the JavaScript I used was obtained from http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

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);
        bmPhoto.SetResolution(72, 72);
  
        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;

        try
        {
            grPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, targetW, targetH),
                                targetX, targetY, targetW, targetH, GraphicsUnit.Pixel);
            //Only JPG format for this demo
            bmPhoto.Save(imgMemoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        }
        catch (Exception e)
         ... //removed code to stay concise
        return imgMemoryStream.GetBuffer();
    }

Enjoy!

• Share This Post:
• 
• 
•