In this article I will explain how to Crop
Images dynamically in Asp.net using Jcrop jQuery Plugin and Upload crop images
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 Dynamic image Crop code.
In this
scenario I have added file upload button for getting images and I have created
two new folders with the name as “Dynamicimages” and “cropDynamicimages”. This is
a Dynamic image crop example.
Below is the sample Jcrop Image Crop code
<script type="text/javascript">
$(function () {
$('#imgDynamiccrop').Jcrop({
onSelect: getcroparea
});
})
function
getcroparea(c) {
$('#hdnx').val(c.x);
$('#hdny').val(c.y);
$('#hdnw').val(c.w);
$('#hdnh').val(c.h);
};
</script>
Below is the page
design.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Crop Image using crop 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 () {
$('#imgDynamiccrop').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>
<table align="Center">
<tr>
<td>
<b><u style="font-size:x-large;color:maroon">Dynamic Image Croping</u></b>
</td>
</tr>
<tr>
<td>Select Image :
<asp:FileUpload runat="server" ID="fuImages" /></td>
<td>
<asp:Button runat="server" ID="btnGetImage" Text="Get Image" OnClick="btnGetImage_OnClick" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<img runat="server" id="imgDynamiccrop" 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 colspan="2">Crop Image :
<asp:Button ID="btncrop" runat="server" OnClick="btnDynamiccrop_Click" Text="Crop Images" /></td>
</tr>
<tr>
<td colspan="2">
<img id="imgDynamiccropped" 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. Below is
the total code for Dynamic images crop code.
using
System;
using
System.Drawing;
using
System.IO;
public partial class CropImage :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnGetImage_OnClick(object sender, EventArgs e)
{
try
{
ViewState["filename"] = null;
ViewState["filename"] = DateTime.Now.ToString("ss") + Path.GetFileName(fuImages.PostedFile.FileName);
fuImages.SaveAs(Server.MapPath("Dynamicimages/" + ViewState["filename"].ToString()));
imgDynamiccrop.Src = "~/Dynamicimages/" + ViewState["filename"].ToString();
}
catch (Exception ex)
{ }
}
protected void btnDynamiccrop_Click(object sender, EventArgs e)
{
try
{
string
fpath = Path.Combine(Server.MapPath("~/Dynamicimages"), ViewState["filename"].ToString());
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
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_" + ViewState["filename"].ToString();
cfpath = Path.Combine(Server.MapPath("~/cropDynamicimages"), cfname);
bitMap.Save(cfpath);
imgDynamiccropped.Visible = true;
imgDynamiccropped.Src = "~/cropDynamicimages/" + cfname;
}
catch (Exception ex)
{
//throw ex;
}
}
}
Output:
Step 1: After Execution
Step 2: Select image crop area
Step 3: Finally click Crop button.
http://www.codingsack.com/2015/12/20/run-time-crop-images-with-asp-net-mvc-generic-handler/
ReplyDelete