Image crop is not working second time in Ajax modal pop using asp.net. First time when I upload Image in ajax modal popup then image is coming correctly. Second time when I will upload image is not showing in image section.
Please check my below all desing code.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div><asp:LinkButton ID="btnShow" runat="server"
OnClick="LinkButton2_Click">Click here to change you profle photo</asp:LinkButton></div><div><cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender><asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none"><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:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><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" /></ContentTemplate></asp:UpdatePanel></asp:Panel></div><div></div>Below is code behind C#.
protectedvoidUpload(object sender,EventArgs e){string base64 =Request.Form["imgCropped"];byte[] bytes =Convert.FromBase64String(base64.Split(',')[1]); using (System.IO.FileStream stream =newSystem.IO.FileStream(Server.MapPath("~/images/Cropped.png"),System.IO.FileMode.Create)){ stream.Write(bytes,0, bytes.Length); stream.Flush();}}
I am coping an image for profile photo and below URL referring.
http://www.aspforums.net/Threads/370289/Crop-Image-and-upload-using-jQuery-and-HTML5-in-ASPNet/