Introduction:
Here I will explain how to use jQuery to crop and upload image with thumbnail in folder in asp.net using jcrop jQuery plugin or jQuery image crop and upload to folder with thumbnail 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.
Here I will explain how to use jQuery to crop and upload image with thumbnail in folder in asp.net using jcrop jQuery plugin or jQuery image crop and upload to folder with thumbnail 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.
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
 |
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
|
|||
0 comments :
Note: Only a member of this blog may post a comment.