Crop Image and upload using jQuery and HTML5 in ASP.Net

Here's the complete code with FileUpload.

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="http://cdn.rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#FileUpload1").change(function () {
            $('#Image1').hide();
            if (typeof (FileReader) != "undefined") {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $('#Image1').show();
                            $('#Image1').attr("src", e.target.result);
                            $('#Image1').Jcrop({
                                onChange: SetCoordinates,
                                onSelect: SetCoordinates
                            });
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });

        $('[id*=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());
            };
            img.src = $('#Image1').attr("src");
        });
    });
    function SetCoordinates(c) {
        $('#imgX1').val(c.x);
        $('#imgY1').val(c.y);
        $('#imgWidth').val(c.w);
        $('#imgHeight').val(c.h);
    }
</script>
<asp:FileUpload ID="FileUpload1" runat="server" />
<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" />
<asp:Button Text="Upload" runat="server" OnClick="Upload" />
<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" />

Code

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();
    }
}

Screenshot