jQuery Ajax Crop and Upload Image with Preview Example in Asp.Net using C#, VB.NET

By: Suresh Dasari May 21, 2015

Introduction:

Here I will explain how to use jQuery ajax method to crop and upload image with preview / thumbnail in folder in asp.net using jcrop jQuery plugin or jQuery ajax upload and crop image with preview example in asp.net using jQuery jcrop plugin. Jcrop is a powerful image cropping engine for jQuery by using this jcrop plugin we can add cropping functionality easily to your web application.

Description:

In previous posts I explained jQuery dropdown with multiple select options, JavaScript send ampersand value in querystring, jQuery Change style of controls, jQuery Add fade in effect to webpage, jQuery show html page content in popup window and many articles relating to JQuery. Now I will explain how to crop image and upload image with thumbnail in asp.net using jcrop jQuery plugin.

To implement this functionality first create website and write following code in your aspx page

<head>

<title>jQuery Crop Image using crop plugin</title>

$(function() {

$('#imgcrop').Jcrop({

onSelect: getcroparea

});

})

function getcroparea(c) {

$('#hdnx').val(c.x);

$('#hdny').val(c.y);

$('#hdnw').val(c.w);

$('#hdnh').val(c.h);

};

</script>

</head>

<body>

<div>

<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />

</div>

</form>

</body>

</html>

If you observe above code in header section I added jquery.Jcrop.js, js jquery.Jcrop.css files by using these we can implement cropping functionality for images. If you want to apply cropping for image you need to define image id like this “$('#imgcrop').Jcrop()”. If you want these files you can get it from downloadable folder or from here jcrop plugin

After completion of aspx page design add the following namespaces in code behind

C# Code

using System;

using System.Drawing;

using System.IO;

using Image = System.Drawing.Image;

After that write the following code in code behind

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btncrop_Click(object sender, EventArgs e)

{

try

{

string fname = "pool.jpg";

string fpath = Path.Combine(Server.MapPath("~/images"), fname);

Image oimg = Image.FromFile(fpath);

Rectangle cropcords = new Rectangle(

Convert.ToInt32(hdnx.Value),

Convert.ToInt32(hdny.Value),

Convert.ToInt32(hdnw.Value),

Convert.ToInt32(hdnh.Value));

string cfname, cfpath;

Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);

Graphics grph = Graphics.FromImage(bitMap);

grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);

cfname = "crop_" + fname;

cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname);

bitMap.Save(cfpath);

imgcropped.Visible = true;

imgcropped.Src = "~/cropimages/" + cfname;

}

catch (Exception ex)

{

throw ex;

}

VB.NET Code

Imports System.Drawing

Imports System.IO

Imports Image = System.Drawing.Image

Partial Class vbcode

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btncrop_Click(ByVal sender As Object, ByVal e As EventArgs)

Try

Dim fname As String = "pool.jpg"

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

Dim oimg As Image = Image.FromFile(fpath)

Dim cropcords As New Rectangle(Convert.ToInt32(hdnx.Value), Convert.ToInt32(hdny.Value), Convert.ToInt32(hdnw.Value), Convert.ToInt32(hdnh.Value))

Dim cfname As String, cfpath As String

Dim bitMap As New Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat)

Dim grph As Graphics = Graphics.FromImage(bitMap)

grph.DrawImage(oimg, New Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel)

cfname = "crop_" & fname

cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname)

bitMap.Save(cfpath)

imgcropped.Visible = True

imgcropped.Src = "~/cropimages/" & cfname

Catch ex As Exception

Throw ex

End Try

End Sub

End Class

Once you completed all the coding run your application and check your output that will be like as shown below

Demo

jQuery Ajax Crop and Upload Image with Preview Example in Asp.Net using C#, VB.NET

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

3 comments :

PRAKASH said...: This comment has been removed by the author.; August 21, 2015 at 3:48 AM
PRAKASH said...: getting error
Input string was not in a correct format.; August 21, 2015 at 3:49 AM
Unknown said...: it crop when same images in source and designation folder then only crop also give image name as hard core in Server side; September 23, 2015 at 3:33 AM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview