Image cropping in ASP.Net with JQuery


Yesterday I got a chance to explore Jcrop – the jQuery Image Cropping Plugin. You can get more details about JCrop from here. It is nice JQuery plugin to Crop photos. Here is a simple implementation of JCrop with ASP.Net and C#, which will upload a File to webserver, allows the user to crop and save it back to the server. This is POC code. Make sure you validate all the inputs from end users.


For the implementation first download the JQuery plugin from the deepliquid download page. Extact it. Open the JS folder, and add reference of the scripts (jquery.Jcrop.min.js and jquery.min.js) files to the web application. Also Open the CSS folder and link the style sheet (jquery.Jcrop.css) to the ASPX Page. I am using Hidden fields to get the width, height, X, and Y values from the JCrop.

function crop() {
    jQuery(function() {
        jQuery('#<%= PicCropImage.ClientID %>').Jcrop({
            onSelect: updateValues, //this function will be invoked when the user completes his selection
            aspectRatio: 1  //Setting aspectRatio: 1 will allow user to draw rectangle with aspectratio.
    //Updating the values of the Hidden fields from the output of crop.
    function updateValues(img) {
        document.getElementById('<%= positionx.ClientID %>').value = img.x;
        document.getElementById('<%= positiony.ClientID %>').value = img.y;
        document.getElementById('<%= positionx1.ClientID %>').value = img.x2;
        document.getElementById('<%= positiony1.ClientID %>').value = img.y2;
        document.getElementById('<%= sizew.ClientID %>').value = img.w;
        document.getElementById('<%= sizeh.ClientID %>').value = img.h;

And in the server side I am taking the values from the Hidden fields and drawing a new image using the values and saving it in the File System.

//Getting the Filename of the Image displayed.
string fileName = Server.MapPath(this.PicCropImage.ImageUrl);
using (Bitmap sourceImage = new Bitmap(fileName, true))
    Rectangle destinationArea = new Rectangle(0, 0,
        int.Parse(this.sizew.Value), int.Parse(this.sizeh.Value));
    Rectangle sourceArea =
        new Rectangle(int.Parse(this.positionx.Value), int.Parse(this.positiony.Value),
        int.Parse(this.sizew.Value), int.Parse(this.sizeh.Value));
    using (Bitmap newBitmapImage = new Bitmap(destinationArea.Right, destinationArea.Bottom))
        using (Graphics graphicsImage = Graphics.FromImage(newBitmapImage))
            //Setting the Graphics properties
            graphicsImage.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphicsImage.CompositingQuality = CompositingQuality.HighQuality;
            graphicsImage.SmoothingMode = SmoothingMode.HighQuality;
            graphicsImage.DrawImage(sourceImage, destinationArea, sourceArea, GraphicsUnit.Pixel);
            IntPtr hbitMap = newBitmapImage.GetHbitmap();
            using (Image image = Image.FromHbitmap(hbitMap))
                //Saving the Image to file system.
                    string.Concat("Cropped_", Path.GetFileName(fileName))), ImageFormat.Jpeg);

Thats it. You are ready for cropping with JCrop and ASP.Net.
Happy Cropping :)

Anuraj is currently working as Technical Lead. He is a regular speaker on Technology events. He has more than 11+ years experience with Microsoft.Net Technologies.

Facebook Twitter LinkedIn Google+