Saturday, August 10, 2019

How to crop image and save the cropped image using asp.net & jquery

Here I explain how to crop image and save the cropped image using asp.net & jquery. In this example I have used JCropJCrop is the quick and easy way to add image cropping functionality to our web application. Using JCrop I get selected Area of uploaded image and using C#.NET code I have saved croped image.

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Webpage and Design for Crop & Save.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code 
  1. <h3>Image Upload, Crop & Save using ASP.NET & Jquery</h3>
  2. <%-- HTML Code --%>
  3. <table>
  4. <tr>
  5. <td>
  6. Select Image File :
  7. </td>
  8. <td>
  9. <asp:FileUpload ID="FU1" runat="server" />
  10. </td>
  11. <td>
  12. <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
  13. </td>
  14. </tr>
  15. <tr>
  16. <td colspan="3">
  17. <asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
  18. </td>
  19. </tr>
  20. </table>
  21. <asp:Panel ID="panCrop" runat="server" Visible="false">
  22. <table>
  23. <tr>
  24. <td>
  25. <asp:Image ID="imgUpload" runat="server" />
  26. </td>
  27. </tr>
  28. <tr>
  29. <td>
  30. <asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
  31. </td>
  32. </tr>
  33. <tr>
  34. <td>
  35. <%-- Hidden field for store cror area --%>
  36. <asp:HiddenField ID="X" runat="server" />
  37. <asp:HiddenField ID="Y" runat="server" />
  38. <asp:HiddenField ID="W" runat="server" />
  39. <asp:HiddenField ID="H" runat="server" />
  40. </td>
  41. </tr>
  42. </table>
  43. </asp:Panel>

Step-3: Write following JS code in your page Head section.


  1. <%-- Now I Will add some js & css file Here. This is required for select crop area --%>
  2. <%-- you can download this Jcrop.css & jquery.Jcrop.js file from Here : https://github.com/tapmodo/Jcrop --%>
  3. <link href="Scripts/jquery.Jcrop.css" rel="stylesheet" />
  4. <script src="Scripts/jquery-1.7.1.min.js"></script>
  5. <script src="Scripts/jquery.Jcrop.js"></script>
  6. <script language="javascript">
  7. $(document).ready(function () {
  8. $('#<%=imgUpload.ClientID%>').Jcrop({
  9. onSelect: SelectCropArea
  10. });
  11. });
  12. function SelectCropArea(c) {
  13. $('#<%=X.ClientID%>').val(parseInt(c.x));
  14. $('#<%=Y.ClientID%>').val(parseInt(c.y));
  15. $('#<%=W.ClientID%>').val(parseInt(c.w));
  16. $('#<%=H.ClientID%>').val(parseInt(c.h));
  17. }
  18. </script>

Step-4: Add A folder for Save Uploaded Images.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New Folder > Remane Folder. 

Step-5: Write below code in btnUpload_Click event for upload image.


  1. protected void btnUpload_Click(object sender, EventArgs e)
  2. {
  3. // Upload Original Image Here
  4. string uploadFileName = "";
  5. string uploadFilePath = "";
  6. if (FU1.HasFile)
  7. {
  8. string ext = Path.GetExtension(FU1.FileName).ToLower();
  9. if (ext == ".jpg" || ext == ".jpeg" || ext == ".gif" || ext == ".png")
  10. {
  11. uploadFileName = Guid.NewGuid().ToString() + ext;
  12. uploadFilePath = Path.Combine(Server.MapPath("~/UploadImages"), uploadFileName);
  13. try
  14. {
  15. FU1.SaveAs(uploadFilePath);
  16. imgUpload.ImageUrl = "~/UploadImages/" + uploadFileName;
  17. panCrop.Visible = true;
  18. }
  19. catch (Exception ex)
  20. {
  21. lblMsg.Text = "Error! Please try again.";
  22. }
  23. }
  24. else
  25. {
  26. lblMsg.Text = "Selected file type not allowed!";
  27. }
  28. }
  29. else
  30. {
  31. lblMsg.Text = "Please select file first!";
  32. }
  33. }

Step-6: Write code in btnCrop_Click event for Crop & Save Cropped Image.


  1. protected void btnCrop_Click(object sender, EventArgs e)
  2. {
  3. // Crop Image Here & Save
  4. string fileName = Path.GetFileName(imgUpload.ImageUrl);
  5. string filePath = Path.Combine(Server.MapPath("~/UploadImages"), fileName);
  6. string cropFileName = "";
  7. string cropFilePath = "";
  8. if (File.Exists(filePath))
  9. {
  10. System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
  11. Rectangle CropArea = new Rectangle(
  12. Convert.ToInt32(X.Value),
  13. Convert.ToInt32(Y.Value),
  14. Convert.ToInt32(W.Value),
  15. Convert.ToInt32(H.Value));
  16. try
  17. {
  18. Bitmap bitMap = new Bitmap(CropArea.Width, CropArea.Height);
  19. using (Graphics g = Graphics.FromImage(bitMap))
  20. {
  21. g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), CropArea, GraphicsUnit.Pixel);
  22. }
  23. cropFileName = "crop_" + fileName;
  24. cropFilePath = Path.Combine(Server.MapPath("~/UploadImages"), cropFileName);
  25. bitMap.Save(cropFilePath);
  26. Response.Redirect("~/UploadImages/" + cropFileName, false);
  27. }
  28. catch (Exception ex)
  29. {
  30. throw;
  31. }
  32. }
  33. }
Step-7: Run Application.

No comments:

Post a Comment

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...