Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Crop Image using crop plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(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>
<form id="form1" runat="server">
<div>
<img src="images/pool.jpg" id="imgcrop" alt="sample image"/>
<input type="hidden" id="hdnx" runat="server" />
<input type="hidden" id="hdny" runat="server"/>
<input type="hidden" id="hdnw" runat="server"/>
<input type="hidden" id="hdnh" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
<img id="imgcropped" runat="server" visible="false" />
</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 RSS subscribe by email Subscribe by Email

3 comments :

PRAKASH said...
This comment has been removed by the author.
PRAKASH said...

getting error
Input string was not in a correct format.

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

Give your Valuable Comments

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

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.