[Solved] Crop and Upload Image with Thumbnail is not working on touch screen

Hi espoirwakal1,

Refer below code.

HTML

<asp:FileUpload ID="fuUpload" runat="server" accept=".jpg, .png, .gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            <img id="imgPreview" src="" alt="" style="display: none" />
        </td>
        <td>
            <canvas id="canvas" style="max-width: 300px !important; max-height: 300px !important"></canvas>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="OnUpload" 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" />

JavaScript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript"> 
$(function () {
    var jcrop_api;
    $('[id*=fuUpload]').change(function () {
        $('#imgPreview').hide();
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imgPreview').show();
            $('#imgPreview').attr("src", e.target.result);
            $('#imgPreview')[0].onload = function () {
                // Destroy Jcrop plugin if exist.
                if (typeof jcrop_api != 'undefined') {
                    jcrop_api.destroy();
                    jcrop_api = null;
                    $('#imgPreview').width($('#imgPreview')[0].naturalWidth);
                    $('#imgPreview').height($('#imgPreview')[0].naturalHeight);

                    // Clear canvas.
                    var canvas = $("#canvas")[0];
                    var context = canvas.getContext('2d');
                    context.clearRect(0, 0, canvas.width, canvas.height);
                }

                // Initialize Jcrop plugin.
                $('#imgPreview').Jcrop({
                    aspectRatio: 0, // Set aspectRatio.
                    boxWidth: 300,   // Maximum width for bigger image.
                    boxHeight: 300,  // Maximum Height for bigger image.
                    bgColor: 'transparent',
                    onChange: SetCoordinates,
                    onSelect: SetCoordinates
                }, function () {
                    // Store Jcrop API in variable.
                    jcrop_api = this;
                });
            };
        };
        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 = $('#imgPreview').attr("src");
    });
});

Code-Behind

C#

protected void OnUpload(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 OnUpload(sender As Object, e As 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

You can also see the demo in the following link.

https://www.aspsnippets.com/demos/938/