Save cropped Image to folder using key press event

Last Reply 9 days ago By pandeyism

Posted 9 days ago

insted of button i need key press event

$("#btnCrpPhoto").on("click", function () {
    console.log("clickphoto");
    console.log($('#hfX').val());
    console.log($('#hfY').val());
    console.log($('#hfHeight').val());
    console.log($('#hfWidth').val());
}

 

You are viewing reply posted by: pandeyism 9 days ago.
Posted 9 days ago

Hey ganeshg123,

Please refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></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]);
        });
        $(document).keypress(function (e) {
            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>
<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 />
<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" />

Namespaces

C#

using System.IO;

VB.Net

Imports System.IO

Code

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(@"D:\File\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("D:\File\Cropped.png", FileMode.Create)
        stream.Write(bytes, 0, bytes.Length)
        stream.Flush()
    End Using
End Sub