In this article I will explain how to Crop
Images in Asp.net using Jcrop jQuery Plugin and Upload to Folder .Jcrop is a powerful image cropping engine for jQuery by
using this Jcrop plugin we can add cropping functionality easily to your web
application or Website. If you want Jcrop files you can get it from downloadable
folder or from here jcrop plugin.
Its free plugin.
Note :
This is an Static image Crop code.
In this
scenario I have created two new folders with the name as “images” and “cropStaticimages”.
This is a sample static image crop example.
Below is the sample Jcrop Image Crop code
<script type="text/javascript">
$(function () {
$('#imgStaticcrop').Jcrop({
onSelect: getStaticcroparea
});
})
function
getStaticcroparea(c) {
$('#hdnx').val(c.x);
$('#hdny').val(c.y);
$('#hdnw').val(c.w);
$('#hdnh').val(c.h);
};
</script>
Below is the page
design.
<head>
<title>Crop Image using Jcrop plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery/jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#imgStaticcrop').Jcrop({
onSelect: getStaticcroparea
});
})
function
getStaticcroparea(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>
<table align="Center">
<tr>
<td>
<b><u style="font-size:large;color:maroon;"> Crop Static image</u></b>
</td>
</tr>
<tr>
<td>
<img src="images/images.jpg" id="imgStaticcrop" 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" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnStaticcrop" runat="server" OnClick="btnStaticcrop_Click" Text="Crop Static
Images" />
</td>
</tr>
<tr>
<td>
<img id="imgShowcropped" runat="server" visible="false" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
You
observe above code 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 “$('# imgStaticcrop').Jcrop()”. If you want Jcrop files you can get it from downloadable
folder or from here jcrop plugin.
Its free plugin.
using
System;
using
System.Drawing;
using
System.IO;
public partial class StateCropImages : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnStaticcrop_Click(object sender, EventArgs e)
{
try
{
string
fname = "images.jpg";
string
fpath = Path.Combine(Server.MapPath("~/images"), fname);
System.Drawing.Image
oimg = System.Drawing.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
bitStaticMap = new Bitmap(cropcords.Width,
cropcords.Height, oimg.PixelFormat);
Graphics
grphStatic = Graphics.FromImage(bitStaticMap);
grphStatic.DrawImage(oimg, new Rectangle(0, 0, bitStaticMap.Width, bitStaticMap.Height), cropcords,
GraphicsUnit.Pixel);
cfname = "cropStatic_" + fname;
cfpath = Path.Combine(Server.MapPath("~/cropStaticimages"), cfname);
bitStaticMap.Save(cfpath);
imgShowcropped.Visible = true;
imgShowcropped.Src = "~/cropStaticimages/" + cfname;
}
catch (Exception ex)
{
throw
ex;
}
}
}
Output:
No comments:
Post a Comment