In this article I will explain with an example, how to crop and upload Image with Live Thumbnail Preview using
jQuery and
HTML5 Canvas in ASP.Net with C# and VB.Net.
The image will be cropped using the
jCrop jQuery plugin, and Live Thumbnail Preview is displayed using
HTML5 Canvas.
HTML Markup
The HTML Markup consists of an HTML FileUpload, HTML Image, HTML Button, ASP.Net Button,
HTML5 Canvas and some hidden fields.
<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>
<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" />
Crop Image with Live Thumbnail Preview using jQuery and HTML5
Inside the
jQuery document ready event handler, a change event handler is assigned to a FileUpload control and a click event handler is assigned to the HTML Button.
When a file is selected in the HTML FileUpload control, it is read using
HTML FileReader API and then the image is displayed using the Image element and finally the
jQuery jCrop plugin is applied to the Image element.
The jCrop plugin makes a call to SetCoordinates function on its onChange and onSelect event handlers, which allow us to save the coordinates and dimensions i.e. height and width of the cropped image to the hidden fields.
When the
Crop Button is clicked, it first creates an instance of the
HTML5 Canvas and then loads the Image into an Image object with an
OnLoad event handler.
Inside the OnLoad event handler, the original image is redrawn on the canvas using save the coordinates and dimensions i.e. height and width of the cropped image.
Finally the base64 string of the cropped image is fetched from the Canvas using the toDataURL method and is saved in the imgCropped hidden field.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function () {
$('#FileUpload1').change(function () {
$('#Image1').hide();
var reader = newFileReader();
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*=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();
};
</script>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Uploading and saving the image in folder on Server Side in ASP.Net
When the Upload button is clicked, the cropped image is read as base64 string from the imgCropped hidden field using its Name and then converted to bytes and saved in folder using FileStream class.
C#
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"), FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
}
VB.Net
Protected Sub Upload(sender As Object, e As System.EventArgs)
Dim base64 As String = Request.Form("imgCropped")
Dim bytes As Byte() = Convert.FromBase64String(base64.Split(",")(1))
Using stream As New FileStream(Server.MapPath("~/Images/Cropped.png"), FileMode.Create)
stream.Write(bytes, 0, bytes.Length)
stream.Flush()
End Using
End Sub
Screenshot
![Crop and Upload Image with Thumbnail using jQuery and HTML5 in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
