Geeks With Blogs

News

Locations of visitors to this page

View ► Sanjay Uttam [sanjay.uttam@gmail.com]'s profile on LinkedIn


Add to Google Reader or Homepage




Sanjay Uttam Predominantly .NET
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!
kick it on DotNetKicks.com Posted on Monday, September 8, 2008 12:21 AM | Back to top

Copyright © Sanjay Uttam | Powered by: GeeksWithBlogs.net | Join free