Crop Image in Asp.net using Jcrop jQuery Plugin
Image Upload And Crop Or Resize Image Using JQuery JCrop Plugins In Asp.Net C#.
Multiple Image Upload
Image Update in Gridview
Show Image Preview
Restrict Upload File Size
Image Insert Bind GridView
Without Database Upload Image Show
Download JQuery Plugins
https://app.box.com/s/bcwq6p6z3eooeqmj7m2q3fdl5dphuosi https://app.box.com/s/68daq0falceno4uiolnnn2d2cm52lc1q
Download Coding
Download
DEMO
Html Coding
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageCrop.aspx.cs" Inherits="ImageCrop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="JQS/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="JQS/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" media="screen" />
<script type="text/javascript">
$(document).ready(function ()
{
$('#ImageCroped').Jcrop({ onSelect: updateCoordinates });
});
function updateCoordinates(p)
{
$('#XAxis').val(p.x);
$('#YAxis').val(p.y);
$('#Height').val(p.h);
$('#Width').val(p.w);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:image id="ImageCroped" runat ="server" Visible="False" />
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Upload" />
<asp:HiddenField ID="XAxis" runat="server" />
<asp:HiddenField ID="YAxis" runat="server" />
<asp:HiddenField ID="Height" runat="server" />
<asp:HiddenField ID="Width" runat="server" /> <br />
<asp:Button ID="Button1" runat="server" Text="Crop Image"
onclick="Button1_Click" Height="25px" Width="98px" />
<asp:Image ID="CropedImage" runat="server" Visible="false" />
<asp:Label ID="lblFileName" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
C# Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.IO;
public partial class ImageCrop : System.Web.UI.Page
{
string name;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
/////// Upload Image ////////
ImageCroped.Visible = true;
lblFileName.Text = FileUpload1.FileName;
name = Path.GetFileName(FileUpload1.PostedFile.FileName);
string UploadFilePath = Path.Combine(Server.MapPath("~/Uploads"), name);
FileUpload1.SaveAs(UploadFilePath);
ImageCroped.ImageUrl = "~/Uploads/" + name;
/////// Upload Image ////////
}
protected void Button1_Click(object sender, EventArgs e)
{
////// After Croped Image ///////
int x = Convert.ToInt32(XAxis.Value);
int y = Convert.ToInt32(YAxis.Value);
int h = Convert.ToInt32(Height.Value);
int w = Convert.ToInt32(Width.Value);
string fileName = Path.GetFileName(ImageCroped.ImageUrl);
string imagePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
System.Drawing.Image imgToCrop1 = Bitmap.FromFile(imagePath);
Bitmap btmap = new Bitmap(w, h, imgToCrop1.PixelFormat);
Graphics graphcs = Graphics.FromImage(btmap);
graphcs.DrawImage(imgToCrop1, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
string cropedImagePath = Server.MapPath("Uploads/" + lblFileName);
btmap.Save(cropedImagePath);
CropedImage.Visible = true;
CropedImage.ImageUrl = "Uploads/" + lblFileName;
////// After Croped Image ///////
}
}
First - Create the New Web From - Add - Image control - File Upload Control -Input Button - After Croped - Image Control
Next - Add the Id Values For Controls
Next - Add the Jquery Plugins & Scripts
Show The All Controls Html Codings
Next - Add the Name Spaces - Add the Upload Codings
Create to the Image Path Folder
Next - Add the Croped Image Codings - Get file Name & Image Path Name
Run[F5]- the Program To Crop The Image
.gif)
