Hi paulrajmca,
Please refer below sample.
Get the plugin from the below article and read the details.
Get and bind your image from database onClick of button and show in image control and then crop it.
HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#btnCrop').click(function () {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
$('#imgCropped').val(canvas.toDataURL());
$('[id*=btnUpload]').show();
};
img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
function ApplyCropPlugin() {
$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
</script>
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<asp:Image ID="Image1" runat="server" />
</td>
<td>
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" Style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
Namespaces
C#
using System;
using System.Web.UI;
using System.IO;
VB.Net
Imports System.IO
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
string path = "~/Files/Desert.jpg";
Image1.ImageUrl = path;
ScriptManager.RegisterStartupScript(this, this.GetType(), "CropImage", "ApplyCropPlugin();", true);
}
protected void Upload(object sender, EventArgs e)
{
string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
using (FileStream stream = new FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Dim path As String = "~/Files/Desert.jpg"
Image1.ImageUrl = path
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CropImage", "ApplyCropPlugin();", True)
End Sub
Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
Dim base64 As String = Request.Form("imgCropped")
Dim bytes As Byte() = Convert.FromBase64String(base64.Split(","c)(1))
Using stream As FileStream = New FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create)
stream.Write(bytes, 0, bytes.Length)
stream.Flush()
End Using
End Sub
Screenshot
