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 Crop Image in Asp.net using Jcrop jQuery Plugin and Upload to Folder

Mar 30, 2014
Introduction
  
Here I will explain how to crop image in asp.net using jcrop jQuery plugin or jQuery image crop and upload 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 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


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

9 comments :

Unknown said...

Thanks master nice example...

Anonymous said...

nice one dude

Anonymous said...

can you please tell how to retrieve this cropped image?
I am facing a problem while retrieving it..
Please suggect...

Unknown said...

please have a sound frequency image demo.

Anonymous said...

Awesome tutorial! Can u please add a thumbnail previewer? Thanx in advance

Anonymous said...

Is there a way to extract the text based on the clipped image. In short I am looking to extract the text within the selected region of the image.

Anonymous said...

I am getting a Problem.please any one help me out ..
Rectangle cropcords = new Rectangle((Convert.ToInt16(hnhx.Value)),(Convert.ToInt16(hnhy.Value)),(Convert.ToInt16(hnhw.Value)),(Convert.ToInt16(hnhh.Value)));

in this line the error occurs " String input was in the correct format "
I have done all my work to solve it but failed to do so ..

Anonymous said...

thanku sir

Assm said...

I cropped image using C# like this.
http://www.aspdotnet-suresh.com/2014/03/jquery-crop-image-and-upload-using-jcrop-plugin.html

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.