Upload and Crop Images with jQuery, JCrop and ASP.NET

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadAndCrop.aspx.cs" Inherits="UploadAndCrop" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.    <head runat="server">  
  5.       <title></title>  
  6.    </head>  
  7.    <body>  
  8.       <form id="form1" runat="server">  
  9.          <div>  
  10.             <asp:Panel ID="pnlUpload" runat="server">  
  11.                <asp:FileUpload ID="Upload" runat="server" />  
  12.                <br />  
  13.                <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />  
  14.                <asp:Label ID="lblError" runat="server" Visible="false" />  
  15.             </asp:Panel>  
  16.             <asp:Panel ID="pnlCrop" runat="server" Visible="false">  
  17.                <asp:Image ID="imgCrop" runat="server" />  
  18.                <br />  
  19.                <asp:HiddenField ID="X" runat="server" />  
  20.                <asp:HiddenField ID="Y" runat="server" />  
  21.                <asp:HiddenField ID="W" runat="server" />  
  22.                <asp:HiddenField ID="H" runat="server" />  
  23.                <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />  
  24.             </asp:Panel>  
  25.             <asp:Panel ID="pnlCropped" runat="server" Visible="false">  
  26.                <asp:Image ID="imgCropped" runat="server" />  
  27.             </asp:Panel>  
  28.          </div>  
  29.       </form>  
  30.    </body>  
  31. </html>  
  32. <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />  
  33. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
  34. <script type="text/javascript" src="script/jquery.Jcrop.pack.js"></script>  
  35. <script type="text/javascript">  
  36.    jQuery(document).ready(function() 
  37.    {    
  38.       jQuery('#imgCrop').Jcrop
  39.      ({  
  40.          onSelect: storeCoords   
  41.      });    
  42.    });  
  43.    function storeCoords(c) {  
  44.      
  45.    jQuery('#X').val(c.x);       
  46.    jQuery('#Y').val(c.y);       
  47.    jQuery('#W').val(c.w);       
  48.    jQuery('#H').val(c.h);  
  49.      
  50.    };  
  51.      
  52. </script>  
  1. using System.IO;  
  2. using SD = System.Drawing;  
  3. using System.Drawing.Imaging;  
  4. using System.Drawing.Drawing2D;  
  5. String path = HttpContext.Current.Request.PhysicalApplicationPath + "images\\";  
  6. protected void Page_Load(object sender, EventArgs e)  
  7. {  
  8. }  
  9. protected void btnUpload_Click(object sender, EventArgs e)  
  10. {  
  11.    Boolean FileOK = false;  
  12.    Boolean FileSaved = false;  
  13.    if (Upload.HasFile)  
  14.    {  
  15.       Session["WorkingImage"] = Upload.FileName;  
  16.       String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();  
  17.       String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };  
  18.       for (int i = 0; i < allowedExtensions.Length; i++)  
  19.       {  
  20.          if (FileExtension == allowedExtensions[i])  
  21.          {  
  22.             FileOK = true;  
  23.          }  
  24.       }  
  25.    }  
  26.    if (FileOK)  
  27.    {  
  28.       try  
  29.       {  
  30.          Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);  
  31.          FileSaved = true;  
  32.       }  
  33.       catch (Exception ex)  
  34.       {  
  35.          lblError.Text = "File could not be uploaded." + ex.Message.ToString();  
  36.          lblError.Visible = true;  
  37.          FileSaved = false;  
  38.       }  
  39.    }  
  40.    else  
  41.    {  
  42.       lblError.Text = "Cannot accept files of this type.";  
  43.       lblError.Visible = true;  
  44.    }  
  45.    if (FileSaved)  
  46.    {  
  47.       pnlUpload.Visible = false;  
  48.       pnlCrop.Visible = true;  
  49.       imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();  
  50.    }  
  51. }  
  52. protected void btnCrop_Click(object sender, EventArgs e)  
  53. {  
  54.    string ImageName = Session["WorkingImage"].ToString();  
  55.    int w = Convert.ToInt32(W.Value);  
  56.    int h = Convert.ToInt32(H.Value);  
  57.    int x = Convert.ToInt32(X.Value);  
  58.    int y = Convert.ToInt32(Y.Value);  
  59.    byte[] CropImage = Crop(path + ImageName, w, h, x, y);  
  60.    using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))  
  61.    {  
  62.       ms.Write(CropImage, 0, CropImage.Length);  
  63.       using(SD.Image CroppedImage = SD.Image.FromStream(ms, true))  
  64.       {  
  65.          string SaveTo = path + "crop" + ImageName;  
  66.          CroppedImage.Save(SaveTo, CroppedImage.RawFormat);  
  67.          pnlCrop.Visible = false;  
  68.          pnlCropped.Visible = true;  
  69.          imgCropped.ImageUrl = "images/crop" + ImageName;  
  70.       }  
  71.    }  
  72. }  
  73. static byte[] Crop(string Img, int Width, int Height, int X, int Y)  
  74. {  
  75.    try  
  76.    {  
  77.       using (SD.Image OriginalImage = SD.Image.FromFile(Img))  
  78.       {  
  79.          using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))  
  80.          {  
  81.             bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);  
  82.             using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))  
  83.             {  
  84.                Graphic.SmoothingMode = SmoothingMode.AntiAlias;  
  85.                Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;  
  86.                Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;  
  87.                Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);  
  88.                MemoryStream ms = new MemoryStream();  
  89.                bmp.Save(ms, OriginalImage.RawFormat);  
  90.                return ms.GetBuffer();  
  91.             }  
  92.          }  
  93.       }  
  94.    }  
  95.    catch (Exception Ex)  
  96.    {  
  97.       throw (Ex);  
  98.    }  
  99. }