As we know the assorted websites like Facebook, LinkedIn, Google and so forth., are utilizing Impression Cropping instrument when we incorporate a brand new picture. I found many ways to do that perform but lately I received Jcrop for image cropping. Jcrop will be the quick and simple way to include impression cropping performance for your net software with all the jQuery help.

Jcrop is simply a device which lets you crop image with reside preview. But, after the cropping picture, you have to create a new picture using the picked X-Axis, Y-Axis, Width and Height. I found several tricks to produce new photo through Method.Drawing.Image but I could not get this better to use cropping impression. So I decided to utilize ASPJpeg for making new picture.

ASPJpeg is a server part which will assist your ASP.Net apps with all their image-management wants. With ASPJpeg, you can create high-quality thumbnails, logo-stamp images, extract metadata details from images, crop, improve, rotate, convert, and much much more. But, listed here we are going to use for CROPPING image.

How to begin? (Jcrop Set up)

Add the following files into your project

  • jquery.min.js
  • jquery.Jcrop.js
  • jquery.Jcrop.css

Now we'd like to include above documents into our <head> segment and some fashion courses for HTML factors also as create features inside the webpage with all the OnChange and OnSelect event handler. These occasions are utilized to update existing selection of coordinates within the Concealed Fields.

<head runat="server">
<style type="text/css">
h2.panelTitle { font-size: 18px; margin-bottom: 5px; }
p.content { color: #5f5f61; width: 50%; }
div.imgCrop { width: 330px; float: left; }
div.imgPreview { width: 140px; float: left; margin-top: 40px; }
div.previewOverflow { width: 115px; height: 115px; overflow: hidden; }
div.previewText { color: #333; text-align: center; width: 115px; font-size: 14px; margin-top: 5px; }
div.clear { clear: both; height: 0; }
<link href="/_assets/js/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="/_assets/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/_assets/js/jcrop/jquery.Jcrop.js" type="text/javascript"></script>
<script type="text/javascript">
var imgWidth = 0;
var imgHeight = 0;
function getImageDimensions(w, h) {
imgWidth = w;
imgHeight = h;
// Initialize Jcrop
$(function() {
    onSelect: storeCoords,
    onChange: storeCoords,
    minSize: [115, 115],
    setSelect: [0, 0, 115, 115],
    aspectRatio: 1
// Update every move of the cropping in the Hidden Fields and Live Preview
function storeCoords(c) {
  var rx = 115 / c.w;
  var ry = 115 / c.h;
    width: Math.round(rx * imgWidth) + 'px',
    height: Math.round(ry * imgHeight) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'

Add the following code in your <body> section

<form id="form1" runat="server">
  <div style="padding: 10px;">
    <!-- PANEL #1: Choose Upload File -->
    <asp:Panel runat="server" ID="step1">
      <h2 class="panelTitle"> Update a picture of yourself</h2>
      <asp:FileUpload ID="FileUpload1" runat="server" />
      <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click" />
      <br />
      <asp:Label ID="lblError" runat="server" Visible="false" />
      <p class="content"> You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities, nudity, artwork or copyrighted images.)</p>
    <!-- PANEL #2: Show the Image Corpping with Preview -->     
    <asp:Panel runat="server" ID="step2" Visible="false">
      <h2 class="panelTitle"> Crop this picture of yourself</h2>
      <p class="content"> You can drag the box to select the crop area, and use the handle to resize it.<br />
        <asp:LinkButton runat="server" ID="lbBackToUpload" Text="Back to upload" OnClick="lbBackToUpload_Click"></asp:LinkButton>
        <div class="imgCrop">
          <asp:Image ID="imgCrop" runat="server" />
        <div class="imgPreview">
          <div class="previewOverflow">
            <asp:Image ID="preview" runat="server" />
          <div class="previewText"> Preview</div>
        <div class="clear"> </div>
      <br />
      <asp:HiddenField ID="X1" runat="server" />
      <asp:HiddenField ID="Y1" runat="server" />
      <asp:HiddenField ID="X2" runat="server" />
      <asp:HiddenField ID="Y2" runat="server" />
      <asp:HiddenField ID="W" runat="server" />
      <asp:HiddenField ID="H" runat="server" />
      <asp:Button ID="btnCrop" runat="server" Text="Apply Changes" OnClick="btnCrop_Click" />
      <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
    <asp:Panel ID="pnlCropped" runat="server" Visible="false">
      <asp:Image ID="imgCropped" runat="server" />

After added above snipts, we will work on the backend side. We have 5 methods to create on the backend side.
  • CancelCrop (Private Method)
  • btnUpload_Click
  • btnCrop_Click
  • btnCancel_Click
  • lbBackToUpload_Click

Add Reference of ASPJpeg

Ahead of the previously mentioned techniques we have to add ASPJpeg Reference into our Bin folder, follow the process to incorporate an ASPJpeg Reference File.

Step 1: Right click on the Bin Folder / Root Folder and select Add Reference

Step 2: Browse the AspJpeg.dll file from your Hard Drive and click OK to continue.

Lets have a look your added reference picture.

Lets have a look your added reference picture.

using System;
using System.IO;
using System.Web;
String tempPath = HttpContext.Current.Server.MapPath("uploads/temp/");
String savePath = HttpContext.Current.Server.MapPath("uploads/images/");
protected void btnUpload_Click(object sender, EventArgs e)
        // Generate Random String
        String NewID = System.Guid.NewGuid().ToString("N").Substring(0, 10);
        // initialize variables
        String fileName = String.Empty;
        String fileExtension = String.Empty;
        Boolean fileOK = false;
        Boolean fileSaved = false;
        // Check: If file has been selected to upload
        if (FileUpload1.HasFile)
            Session.Add("WorkingImage", FileUpload1.FileName);
            fileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
            String[] allowedExtensions = { ".jpg", "jpeg", ".png", ".gif" };
            for (int i = 0; i < allowedExtensions.Length; i++)
                if (fileExtension == allowedExtensions[i]) fileOK = true;
        // Check: If fileOK variable is equest to true
        if (fileOK)
                fileName = NewID + fileExtension;
                String tempLocation = tempPath + fileName;
                ASPJPEGLib.IASPJpeg objJpeg = new ASPJPEGLib.ASPJpeg();
                objJpeg.PreserveAspectRatio = 1;
                const int maxWidth = 300;
                if (objJpeg.OriginalWidth > objJpeg.OriginalHeight)
                    objJpeg.Width = maxWidth;
                    objJpeg.Height = objJpeg.OriginalHeight * maxWidth / objJpeg.OriginalWidth;
                    objJpeg.Height = maxWidth;
                    objJpeg.Width = objJpeg.OriginalWidth * maxWidth / objJpeg.OriginalHeight;
                // Send generated image Width and Height to JavaScript for the Jcrop preview
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "getImageDimensions", "getImageDimensions(" + objJpeg.Width + "," + objJpeg.Height + ");", true);
                // Create new file with new width: 300
                // Save Temprary Location and Filename into Session
                Session["TempLocation"] = tempLocation;
                Session["TempFileName"] = fileName;
                fileSaved = true;
            catch (Exception ex)
                lblError.Text = "File could not be uploaded." + ex.Message.ToString();
                lblError.Visible = true;
                fileSaved = false;
            lblError.Text = "Cannot accept files of this type.";
            lblError.Visible = true;
        // Check: if fileSaved variable is equest to true
        if (fileSaved)
            step1.Visible = false; // Panel #1: Disappear
            step2.Visible = true; // Panel #2: Appear
            // Fill the Origial Image and Preview with the below source
            imgCrop.ImageUrl = "~/uploads/temp/" + fileName;
            preview.ImageUrl = "~/uploads/temp/" + fileName;
    protected void btnCrop_Click(object sender, EventArgs e)
        String newFileName = savePath + Session["TempFileName"];
        // Create instance for AspJpeg
        ASPJPEGLib.IASPJpeg objJpeg1 = new ASPJPEGLib.ASPJpeg();
        // Open file from temprary location
        // Set Quality: 80
        objJpeg1.Quality = 80;
        // Image Cropped with selected area
        objJpeg1.Crop(int.Parse(X1.Value), int.Parse(Y1.Value), int.Parse(X2.Value), int.Parse(Y2.Value));
        // Save file into uploads/images
        step2.Visible = false; // Panel #2: Disappear
        pnlCropped.Visible = true; // Active Panel Cropped Image
        imgCropped.ImageUrl = "~/uploads/images/" + Session["TempFileName"];
        // Delete temprary file
    protected void lbBackToUpload_Click(object sender, EventArgs e)
        step1.Visible = true; // Panel appear #1
        step2.Visible = false; // Panel disappear #2
    protected void btnCancel_Click(object sender, EventArgs e)
        step1.Visible = true; // Panel appear #1
        step2.Visible = false; // Panel disappear #2
    private void CancelCrop()
        String tmpFileLocation = Session["TempLocation"].ToString();
        // Delete temprary files if exists
        if (File.Exists(tmpFileLocation))

Lastly, we've got finished the Jcrop Picture Cropping script. You'll be able to make use of your own FileUpload method for image uploading. I'm also impressed by a person who experienced developed great structural code. therefore, I followed him. Sorry to forgot reference website link.