ItProjects For You

The price of the projects include source code, abstract, report and support for development and deployment. Please use our contact us form or send email to Support@srishtis.com

Upload and Crop Images with jQuery, JCrop and ASP.NET

This example consists of a single page.It caters for three actions: first,the user is presented with an Upload control to locate and upload their image; second, they will be presented with their uploaded image ready for cropping; and finally, they are presented with the cropped result.To accommodate this, three Panel controls are added to the page.The first,pnlUpload contains the FileUpload control and a button linked to an event handler for its click event. The second, pnlCrop contains an Image control and a button -again,linked to an event handler for its Click event.It also contains 4 HiddenField controls. They will be explained shortly.The Panel's Visibility is set to false.The final Panel,pnlCropped contains an Image control,and its Visibility is also set to false.

And create a data table and its underlying table adapter in the DSProduction.xsd with the SQL query shown in Listing 1.

<%@ PageLanguage="C#" AutoEventWireup="true"
CodeFile="UploadAndCrop.aspx.cs" Inherits="UploadAndCrop" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click
" Text="Upload" />
<asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
<asp:Image ID="imgCrop" runat="server" />
<br />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
<asp:Image ID="imgCropped" runat="server" />
</asp:Panel>
</div>
</form>
</body>
</html>

Some Javascript is required.If you were starting this kind of application from scratch,it would need an awful lot of javascript.However,jQuery's real power is illustrated by just how little javascript this page actually needs.To make use of both jQuery and JCrop,they need to be linked to in the head section of the page, along with the css file that comes as part of the JCrop download.The link to jQuery makes use of the copy available from the Google Ajax API Library for better caching and faster downloading:

All that's now needed to activate JCrop is a handful of lines of Javascript,which go within <script> that's in the head of the document below the previous lines:

It really is that simple.Jcrop has been applied to the image that has the id of imgCrop (the one in pnlCrop),and an event handler has been added to the select event of the cropper.This will happen when the user has completed selecting the area of the image they want to keep.The handler makes use of the storeCoords function,which sets the values of the HiddenFields, passing them the x and y coordinates of the top left of the selection relative to the image,and the width and height of the selection.That's all ASP.NET needs to know in order to process the image on the server.Now on to the server-side code.There are 4 namespaces that need to be referenced in additional to the default ones that a new Web Form brings in:

using System.IO;
using SD = System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

Since we will be working with instances of System.Drawing.Image as well as System.Web.UI.WebControls,which also has an Image class,We have aliased System.Drawing.Image,which will permit me to use a shorthand to reference the System.Drawing.Image classes.The first four lines of the code-behind simply set a variable to point to the file system path of the directory in which uploaded images will be stored, and show an empty Page_Load method:

String path = HttpContext.Current.Request.PhysicalApplicationPath +
"images\\";
protected void Page_Load(object sender, EventArgs e)
{}

The next section covers the event handler for the Upload button click:

protected void btnUpload_Click(object sender, EventArgs e)
{
Boolean FileOK = false;
Boolean FileSaved = false;
if (Upload.HasFile)
{
Session["WorkingImage"] = Upload.FileName;
String FileExtension
=Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };
for (int i = 0; i < allowedExtensions.Length; i++)
{
if (FileExtension == allowedExtensions[i])
{
FileOK = true;
}
}
}
if (FileOK)
{
try
{
Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);
FileSaved = true;
}
catch (Exception ex)
{
lblError.Text = "File could not be uploaded." + ex.Message.ToString();
lblError.Visible = true;
FileSaved = false
}
}
else
{
lblError.Text = "Cannot accept files of this type.";
lblError.Visible = true;
}
if (FileSaved)
{
pnlUpload.Visible = false;
pnlCrop.Visible = true;
imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();
}
}

The next section covers the event handler for the Crop button:

protected void btnCrop_Click(object sender,EventArgs e)
{
string ImageName = Session["WorkingImage"].ToString();
int w = Convert.ToInt32(W.Value);
int h = Convert.ToInt32(H.Value);
int x = Convert.ToInt32(X.Value);
int y = Convert.ToInt32(Y.Value);
byte[] CropImage = Crop(path + ImageName, w, h, x, y);
using(MemoryStream ms = new MemoryStream
(CropImage,0,CropImage.Length)) {
ms.Write(CropImage, 0, CropImage.Length);
using(SD.Image CroppedImage = SD.Image.FromStream(ms,true))
{
string SaveTo = path + "crop" + ImageName;
CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
pnlCrop.Visible = false;
pnlCropped.Visible = true;
imgCropped.ImageUrl = "images/crop" + ImageName;
}
}
}

It then calls a method called Crop() to perform the actual cropping of the image (more of which soon).Crop() returns a byte array,which is written to a MemoryStream so that it can be used and converted back to an Image.This is then prefixed with the word "crop" in its name before being saved to disk and displayed to the user.

The Crop() method is below:

static byte[] Crop(string Img,int Width,int Height, int X,int Y)
{
try
{
using (SD.Image OriginalImage = SD.Image.FromFile(Img))
{
using(SD.Bitmapbmp=newSD.Bitmap(Width,Height, OriginalImage.PixelFormat))
{
bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
{
Graphic.SmoothingMode = SmoothingMode.AntiAlias;
Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
Graphic.DrawImage(OriginalImage,new SD.Rectangle
(0, 0, Width, Height), X,Y, Width, Height,
SD.GraphicsUnit.Pixel);
MemoryStream ms = new MemoryStream();
bmp.Save(ms,OriginalImage.RawFormat);
return ms.GetBuffer(); }
}
}
}
catch (Exception Ex)
{
throw (Ex);
}
}