Complete ASPX Code:-
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script> <link href="CSS/jquery.Jcrop.css" rel="stylesheet" /> <script language="javascript" type="text/javascript"> $(document).ready(function () { $('#<%=imgToCrop.ClientID%>').Jcrop({ onSelect: getAreaToCrop }); }); function getAreaToCrop(c) { $('#XCoordinate').val(parseInt(c.x)); $('#YCoordinate').val(parseInt(c.y)); $('#Width').val(parseInt(c.w)); $('#Height').val(parseInt(c.h)); } </script> </head> <body> <form id="form1" runat="server"> <div style="width: 540px"> <fieldset> <legend>Upload, crop and save image in asp.net</legend> <table> <tr> <td> Select image to upload : </td> <td> <asp:FileUpload ID="FileUpload1" runat="server" /> </td> <td> <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /> </td> </tr> <tr> <td colspan="3"> <asp:Image ID="imgCropped" runat="server" /> </td> </tr> <tr> <td colspan="3"> <asp:Label ID="lblMsg" runat="server" ForeColor="Red" /> </td> </tr> <tr> <td colspan="3"> <asp:Button ID="btnReset" runat="server" Text="Reset" Visible="false" OnClick="btnReset_Click" /> </td> </tr> </table> <asp:Panel ID="pnlCrop" runat="server" Visible="false"> <table> <tr> <td> <asp:Image ID="imgToCrop" runat="server" /> </td> </tr> <tr> <td> <asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" /> </td> </tr> <tr> <td> <input id="XCoordinate" type="hidden" runat="server" /> <input id="YCoordinate" type="hidden" runat="server" /> <input id="Width" type="hidden" runat="server" /> <input id="Height" type="hidden" runat="server" /> </td> </tr> </table> </asp:Panel> </fieldset> </div> </form> </body> </html>
Complete Code Behind:-
First of all add following namespaces
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Drawing;
then write the code as:
protected void btnUpload_Click(object sender, EventArgs e) { string fileName = string.Empty; string filePath = string.Empty; string extension = string.Empty; try { //Check if Fileupload control has file in it if (FileUpload1.HasFile) { // Get selected image extension extension = Path.GetExtension(FileUpload1.FileName).ToLower(); //Check image is of valid type or not if (extension == ".jpg" || extension == ".jpeg" || extension == ".png" || extension == ".gif" || extension == ".bmp") { //Create unique name for the file fileName = Guid.NewGuid().ToString() + extension; //Create path for the image to store filePath = Path.Combine(Server.MapPath("~/Images"), fileName); //Save image in folder FileUpload1.SaveAs(filePath); //Show the panel and load the uploaded image in image control. pnlCrop.Visible = true; imgToCrop.ImageUrl = "~/Images/" + fileName; } else { lblMsg.Text = "Please select jpg, jpeg, png, gif or bmp file only"; } } else { lblMsg.Text = "Please select file to upload"; } } catch (Exception ex) { lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString(); } finally { extension = string.Empty; fileName = string.Empty; filePath = string.Empty; } } protected void btnCrop_Click(object sender, EventArgs e) { string croppedFileName = string.Empty; string croppedFilePath = string.Empty; //get uploaded image name string fileName = Path.GetFileName(imgToCrop.ImageUrl); //get uploaded image path string filePath = Path.Combine(Server.MapPath("~/Images"), fileName); //Check if file exists on the path i.e. in the UploadedImages folder. if (File.Exists(filePath)) { //Get the image from UploadedImages folder. System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath); //Get user selected cropped area //Convert.ToInt32(String.Format("{0:0.##}", YCoordinate.Value)), Rectangle areaToCrop = new Rectangle( Convert.ToInt32(XCoordinate.Value), Convert.ToInt32(YCoordinate.Value), Convert.ToInt32(Width.Value), Convert.ToInt32(Height.Value)); try { Bitmap bitMap = new Bitmap(areaToCrop.Width, areaToCrop.Height); //Create graphics object for alteration using (Graphics g = Graphics.FromImage(bitMap)) { //Draw image to screen g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), areaToCrop, GraphicsUnit.Pixel); } //name the cropped image croppedFileName = "crop_" + fileName; //Create path to store the cropped image croppedFilePath = Path.Combine(Server.MapPath("~/Images"), croppedFileName); //save cropped image in folder bitMap.Save(croppedFilePath); orgImg.Dispose(); bitMap = null; //Now you can delete the original uploaded image from folder File.Delete(filePath); //Hide the panel pnlCrop.Visible = false; //Show success message in label lblMsg.ForeColor = Color.Green; lblMsg.Text = "Image cropped and saved successfully"; //Show cropped image imgCropped.ImageUrl = "~/Images/" + croppedFileName; //Show Reset button btnReset.Visible = true; } catch (Exception ex) { lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString(); } finally { fileName = string.Empty; filePath = string.Empty; croppedFileName = string.Empty; croppedFilePath = string.Empty; } } } protected void btnReset_Click(object sender, EventArgs e) { imgCropped.ImageUrl = ""; lblMsg.Text = string.Empty; btnReset.Visible = false; }
(Visited 21 times, 1 visits today)