Upload and crop image in Asp.net using Jcrop jquery plugin

Introduction: In this article today I am going to explain how we can implement the functionality of Upload and crop image in Asp.net using Jcrop jquery plugin.

Description:

In the previous article I have explained Image preview after upload in asp.net, Validation for minimum and maximum price using Jquery and Preview image before upload using Jquery and save in asp.net

Add a new webform to project. To implement this functionality follow the given steps:

Step 1: Add the below given script and style sheet between head section of page:

jQuery(document).ready(function () {

jQuery('#imgCrop').Jcrop({

onSelect: storeCoords

});

function storeCoords(c) {

jQuery('#X').val(c.x);

jQuery('#Y').val(c.y);

jQuery('#W').val(c.w);

jQuery('#H').val(c.h);

};

</script>

To download the Jcrop Jquery Plugin Click Here.

Step 2: Now copy and paste the below design in between <from> </form> tag of page:

<legend>Crop Image Demo</legend>

<asp:Panel ID="pnlUpload" runat="server">

<asp:FileUpload ID="FileUpload1" runat="server" />

<br />

<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload Image" />

<asp:Label ID="lblError" runat="server" />

</asp:Panel>

<asp:Panel ID="pnlCrop" runat="server" Visible="false" >

<asp:Image ID="imgCrop" runat="server" Width="500px" Height="500px"/>

<br />

<asp:HiddenField ID="X" runat="server" />

<asp:HiddenField ID="Y" runat="server" />

<asp:HiddenField ID="W" runat="server" />

<asp:HiddenField ID="H" runat="server" />

<asp:Button ID="btnCrop" runat="server" Text="Crop Image" OnClick="btnCrop_Click" />

</asp:Panel>

<asp:Panel ID="pnlCropped" runat="server" Visible="false">

<asp:Image ID="imgCropped" runat="server" />

</asp:Panel>

</fieldset>

</center>

Step 3: after that on Upload image button click write the given code:

In C#:

using System.Drawing;

using System.IO;

using Image = System.Drawing.Image;

using System.Drawing.Drawing2D;

protected void btnUpload_Click(object sender, EventArgs e)

{

string uploadFileName = "";

string uploadFilePath = "";

if (FileUpload1.HasFile)

{

string ext = Path.GetExtension(FileUpload1.FileName).ToLower();

if (ext == ".jpg" || ext == ".jpeg" || ext == ".gif" || ext == ".png")

{

uploadFileName = Guid.NewGuid().ToString() + ext;

uploadFilePath = Path.Combine(Server.MapPath("~/images"), uploadFileName);

try

{

FileUpload1.SaveAs(uploadFilePath);

imgCrop.ImageUrl = "~/images/" + uploadFileName;

imgCrop.Width =500;

pnlCrop.Visible = true;

pnlCropped.Visible = false;

}

catch (Exception ex)

{

lblError.Text = "Error! Please try again.";

}

else

{

lblError.Text = "Selected file type not allowed!!! Upload only Jpeg, Png, Gif Files";

}

else

{

lblError.Text = "Select file first!!!";

}

In VB:

Imports System.Drawing

Imports System.IO

Imports Image = System.Drawing.Image

Imports System.Drawing.Drawing2D

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click

Dim uploadFileName As String = ""

Dim uploadFilePath As String = ""

If FileUpload1.HasFile Then

Dim ext As String = Path.GetExtension(FileUpload1.FileName).ToLower()

If ext = ".jpg" OrElse ext = ".jpeg" OrElse ext = ".gif" OrElse ext = ".png" Then

uploadFileName = Guid.NewGuid().ToString() & ext

uploadFilePath = Path.Combine(Server.MapPath("~/images"), uploadFileName)

Try

FileUpload1.SaveAs(uploadFilePath)

imgCrop.ImageUrl = Convert.ToString("~/images/") & uploadFileName

imgCrop.Width = 500

pnlCrop.Visible = True

pnlCropped.Visible = False

Catch ex As Exception

lblError.Text = "Error! Please try again."

End Try

Else

lblError.Text = "Selected file type not allowed!!! Upload only Jpeg, Png, Gif Files"

End If

Else

lblError.Text = "Select file first!!!"

End If

End Sub

Step 4: On Crop button Click write the code:

In C#:

protected void btnCrop_Click(object sender, EventArgs e)

{

string fileName = Path.GetFileName(imgCrop.ImageUrl);

string filePath = Path.Combine(Server.MapPath("~/images"), fileName);

string cropFileName = "";

string cropFilePath = "";

if (File.Exists(filePath))

{

System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);

Rectangle CropArea = new Rectangle(

Convert.ToInt32(X.Value),

Convert.ToInt32(Y.Value),

Convert.ToInt32(W.Value),

Convert.ToInt32(H.Value));

try

{

Bitmap bitMap = new Bitmap(CropArea.Width, CropArea.Height);

using (Graphics g = Graphics.FromImage(bitMap))

{

g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), CropArea, GraphicsUnit.Pixel);

}

cropFileName = "crop_" + fileName;

cropFilePath = Path.Combine(Server.MapPath("~/images"), cropFileName);

bitMap.Save(cropFilePath);

// Response.Redirect("~/images/" + cropFileName, false);

imgCropped.ImageUrl = "~/images/" + cropFileName;

pnlCropped.Visible = true;

pnlCrop.Visible = false;

}

catch (Exception ex)

{

}

In VB:

Protected Sub btnCrop_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCrop.Click

Dim fileName As String = Path.GetFileName(imgCrop.ImageUrl)

Dim filePath As String = Path.Combine(Server.MapPath("~/images"), fileName)

Dim cropFileName As String = ""

Dim cropFilePath As String = ""

If File.Exists(filePath) Then

Dim orgImg As System.Drawing.Image = System.Drawing.Image.FromFile(filePath)

Dim CropArea As New Rectangle(Convert.ToInt32(X.Value), Convert.ToInt32(Y.Value), Convert.ToInt32(W.Value), Convert.ToInt32(H.Value))

Try

Dim bitMap As New Bitmap(CropArea.Width, CropArea.Height)

Using g As Graphics = Graphics.FromImage(bitMap)

g.DrawImage(orgImg, New Rectangle(0, 0, bitMap.Width, bitMap.Height), CropArea, GraphicsUnit.Pixel)

End Using

cropFileName = Convert.ToString("crop_") & fileName

cropFilePath = Path.Combine(Server.MapPath("~/images"), cropFileName)

bitMap.Save(cropFilePath)

' Response.Redirect("~/images/" + cropFileName, false);

imgCropped.ImageUrl = Convert.ToString("~/images/") & cropFileName

pnlCropped.Visible = True

pnlCrop.Visible = False

Catch ex As Exception

End Try

End If

End Sub

Build and run the project.

Download project:

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.