Upload and Crop Image with JQuery in ASP.Net

Image Cropping is the most important and required part in social media projects. There is a JQuery Plugin which allows to crop image using Jquery without any trouble.

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

How to use it.

 First download the plugin and include the references of the required libraries in .aspx page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>

Add Jquery code for cropping the image

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('[id$=imgCrop]').Jcrop({
            onSelect: storeCoords
        });
    });
    function storeCoords(c) {
        jQuery('[id$=X]').val(c.x);
        jQuery('[id$=Y]').val(c.y);
        jQuery('[id$=Z]').val(c.z);
        jQuery('[id$=A]').val(c.a);
    };
</script>

Add code in your aspx page

<div>
        <asp:Panel ID="pnlCrop" runat="server" Visible="false">
            <asp:Image ID="imgCrop" runat="server" />
            <asp:HiddenField ID="X" runat="server" />
            <asp:HiddenField ID="Y" runat="server" />
            <asp:HiddenField ID="Z" runat="server" />
            <asp:HiddenField ID="A" runat="server" />
        </asp:Panel>
        <asp:Panel ID="pnlCropped" runat="server" Visible="false">
       <asp:Image ID="imgCropped" runat="server" />
        </asp:Panel>
 <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</div>

Now, add code in your aspx.cs page

protected void btnCrop_Click(object sender, EventArgs e)
{
 string ImageName = Session["UploadImage"].ToString();
  int z = Convert.ToInt32(Z.Value);
  int a = Convert.ToInt32(A.Value);
  int x = Convert.ToInt32(X.Value);
  int y = Convert.ToInt32(Y.Value);
  byte[] CropImage = Crop(path + ImageName, z, a, x, y);
  using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
  {
     ms.Write(CropImage, 0, CropImage.Length);
     using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
       {
          string SaveTo = path + "crop" + ImageName;
          CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
           pnlCrop.Visible = false;
           pnlCropped.Visible = true;
           imgCropped.ImageUrl = "images/crop" + ImageName;
       }
    }
 }

static byte[] Crop(string Img, int Width, int Height, int X, int Y)
{
  try
   {
    using (SD.Image OriginalImage = SD.Image.FromFile(Img))
    {
     using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))
      {
      bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
       using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
       {
         Graphic.SmoothingMode = SmoothingMode.AntiAlias;
         Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
         Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
         Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, 

         MemoryStream ms = new MemoryStream();
         bmp.Save(ms, OriginalImage.RawFormat);
         return ms.GetBuffer();
       }
     }
   }
}
    catch (Exception Ex)
    {
      throw (Ex);
    } 

 }

Download Full Solutions:  CroppingSolutions

 It is really simple. Now you can easily crop the image. Please let me know, if you have any query.