Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Image crop is not working second time in Ajax modal pop using asp.net

$
0
0

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/


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>