Hi,
Please refer below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.north {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.west {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.south {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.east {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg;
}
</style>
</head>
<body>
<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br /><br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td><img id="Image1" src="" alt="" style="display: none" /></td>
<td id="image" class="north">
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="button" id="btnRotate" value="Rotate" style="display: none" />
<input type="button" name="btnUpload" value="Upload" id="btnUpload" 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" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.9/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function () {
$('#FileUpload1').change(function () {
$('#Image1').hide();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').show();
$('#Image1').attr("src", e.target.result);
$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
});
$('#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*=btnRotate]').show();
$('[id*=btnUpload]').show();
};
img.src = $('#Image1').attr("src");
});
$("#btnRotate").click(function () {
var img = $('#image');
if (img.hasClass('north')) {
img.attr('class', 'west');
} else if (img.hasClass('west')) {
img.attr('class', 'south');
} else if (img.hasClass('south')) {
img.attr('class', 'east');
} else if (img.hasClass('east')) {
img.attr('class', 'north');
}
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
</script>
</body>
</html>
Demo
for asp.net
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" Style="display: none" />
C#
protected void Upload(object sender, EventArgs e)
{
string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
using (System.IO.FileStream stream = new System.IO.FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
}
VB.Net
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 System.IO.FileStream = New System.IO.FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create)
stream.Write(bytes, 0, bytes.Length)
stream.Flush()
End Using
End Sub
I hope this will help you out.
