Post
Ask Question

Crop Image In ASP.NET Using Script

Step 1: Download project and add scripts into your project under a Scripts folder.
 
Step 2: Follow the below code in .aspx and .cs files.
 
.Aspx page
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="crop_image.aspx.cs" Inherits="_Default" %>  
  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 id="Head1" runat="server">  
  5. <title></title>  
  6. <link href="Scripts/jquery.Jcrop.css" temp_href="Scripts/jquery.Jcrop.css" rel="stylesheet"  
  7. type="text/css" />  
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"  
  9. temp_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
  10. <script type="text/javascript" src="Scripts/jquery.Jcrop.js" temp_src="Scripts/jquery.Jcrop.js"></script>  
  11. <script type="text/javascript">  
  12. jQuery(document).ready(function () {  
  13. jQuery('#imgCrop').Jcrop({  
  14. onSelect: storeCoords  
  15. });  
  16. });  
  17. function storeCoords(c) {  
  18. jQuery('#X').val(c.x);  
  19. jQuery('#Y').val(c.y);  
  20. jQuery('#W').val(c.w);  
  21. jQuery('#H').val(c.h);  
  22. };  
  23. </script>  
  24. </head>  
  25. <body>  
  26. <form id="form1" runat="server">  
  27. <div>  
  28. <asp:Panel ID="pnlUpload" runat="server">  
  29. <asp:FileUpload ID="Upload" runat="server" />  
  30. <br />  
  31. <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />  
  32. <asp:Label ID="lblError" runat="server" Visible="false" />  
  33. </asp:Panel>  
  34. <asp:Panel ID="pnlCrop" runat="server" Visible="false">  
  35. <asp:Image ID="imgCrop" runat="server" />  
  36. <br />  
  37. <asp:HiddenField ID="X" runat="server" />  
  38. <asp:HiddenField ID="Y" runat="server" />  
  39. <asp:HiddenField ID="W" runat="server" />  
  40. <asp:HiddenField ID="H" runat="server" />  
  41. <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />  
  42. </asp:Panel>  
  43. <asp:Panel ID="pnlCropped" runat="server" Visible="false">  
  44. <asp:Image ID="imgCropped" runat="server" />  
  45. </asp:Panel>  
  46. </div>  
  47. </form>  
  48. </body>  
  49. </html>  
.cs Page
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.IO;  
  8. using SD = System.Drawing;  
  9. using System.Drawing.Imaging;  
  10. using System.Drawing.Drawing2D;  
  11. public partial class _Default : System.Web.UI.Page  
  12. {  
  13. String path = HttpContext.Current.Request.PhysicalApplicationPath + "images\\";  
  14. protected void Page_Load(object sender, EventArgs e)  
  15. {  
  16. }  
  17. protected void btnUpload_Click(object sender, EventArgs e)  
  18. {  
  19. Boolean FileOK = false;  
  20. Boolean FileSaved = false;  
  21. if (Upload.HasFile)  
  22. {  
  23. Session["WorkingImage"] = Upload.FileName;  
  24. String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();  
  25. String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };  
  26. for (int i = 0; i < allowedExtensions.Length; i++)  
  27. {  
  28. if (FileExtension == allowedExtensions[i])  
  29. {  
  30. FileOK = true;  
  31. }  
  32. }  
  33. }  
  34. if (FileOK)  
  35. {  
  36. try  
  37. {  
  38. Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);  
  39. FileSaved = true;  
  40. }  
  41. catch (Exception ex)  
  42. {  
  43. lblError.Text = "File could not be uploaded." + ex.Message.ToString();  
  44. lblError.Visible = true;  
  45. FileSaved = false;  
  46. }  
  47. }  
  48. else  
  49. {  
  50. lblError.Text = "Cannot accept files of this type.";  
  51. lblError.Visible = true;  
  52. }  
  53. if (FileSaved)  
  54. {  
  55. pnlUpload.Visible = false;  
  56. pnlCrop.Visible = true;  
  57. imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();  
  58. }  
  59. }  
  60. protected void btnCrop_Click(object sender, EventArgs e)  
  61. {  
  62. string ImageName = Session["WorkingImage"].ToString();  
  63. int w = Convert.ToInt32(W.Value);  
  64. int h = Convert.ToInt32(H.Value);  
  65. int x = Convert.ToInt32(X.Value);  
  66. int y = Convert.ToInt32(Y.Value);  
  67. byte[] CropImage = Crop(path + ImageName, w, h, x, y);  
  68. using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))  
  69. {  
  70. ms.Write(CropImage, 0, CropImage.Length);  
  71. using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))  
  72. {  
  73. string SaveTo = path + "crop" + ImageName;  
  74. CroppedImage.Save(SaveTo, CroppedImage.RawFormat);  
  75. pnlCrop.Visible = false;  
  76. pnlCropped.Visible = true;  
  77. imgCropped.ImageUrl = "images/crop" + ImageName;  
  78. }  
  79. }  
  80. }  
  81. static byte[] Crop(string Img, int Width, int Height, int X, int Y)  
  82. {  
  83. try  
  84. {  
  85. using (SD.Image OriginalImage = SD.Image.FromFile(Img))  
  86. {  
  87. using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))  
  88. {  
  89. bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);  
  90. using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))  
  91. {  
  92. Graphic.SmoothingMode = SmoothingMode.AntiAlias;  
  93. Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;  
  94. Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;  
  95. Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);  
  96. MemoryStream ms = new MemoryStream();  
  97. bmp.Save(ms, OriginalImage.RawFormat);  
  98. return ms.GetBuffer();  
  99. }  
  100. }  
  101. }  
  102. }  
  103. catch (Exception Ex)  
  104. {  
  105. throw (Ex);  
  106. }  
  107. }  
  108. }  
For more download the project.
 
Here is another tutorial on Crop and Save Image in ASP.NET 
Next Recommended Reading How to Disable Enter Key Using JQuery In ASP.NET