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.
 
 
Downloading the Jcrop Plugin
You can download the plugin using the following download link.
Download Jcrop jQuery Plugin
 
 
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 in the Image element and finally the Jcrop plugin is applied to the Image element.
Note: For more details on Image display using HTML5 File Reader API, please refer my article Display preview of image locally without uploading to Server.
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://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*=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#
using System.IO;
 
VB.Net
Imports System.IO
 
 
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

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code