jCrop is not working properly on mobile device

Question

I have a website which has an option to upload image and then crop. I have used jCrop libraries. It is working fine on desktop browser but on mobile it is not showing the image on popup to crop after selecting image.

// show_popup_crop : show the crop popup
function show_popup_crop(url) {
    // change the photo source
    $('#cropbox').attr('src', url);
    // destroy the Jcrop object to create a new one
    try {
        jcrop_api.destroy();
    } catch (e) {
        // object not defined
    }
    // Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
    $('#cropbox').Jcrop({
      aspectRatio: TARGET_W / TARGET_H,
      setSelect:   [ 100, 100, TARGET_W, TARGET_H ],
      allowResize: false,
      trueSize: [200,300],      
      onSelect: updateCoords
    },function(){
        jcrop_api = this;
    });

    // store the current uploaded photo url in a hidden input to use it later
    $('#photo_url').val(url);
    // hide and reset the upload popup
    $('#popup_upload').hide();
    $('#loading_progress').html('');
    $('#photo').val('');

    // show the crop popup
    $('#popup_crop').show();
}


function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

Please find below screenshot Step1 and step2 (it is screengrap of desktop)

Step 1 :

Step 2 :

But on mobile step2 shows empty image. Why this is happening, what changes I do I need to make?

Answer 1

I don't think its possible on mobile, you have some option to open media popup on mobile

Here is the HTML for image capturing:

<input type="file" accept="image/*" capture>

Capturing video is quite similar; you just need to set the accept attribute accordingly.

<input type="file" accept="video/*" capture>

And the story is the same for capturing audio:

<input type="file" accept="audio/*" capture>

For example, if you want to take a photo using the device camera and upload the image using an HTML form, this is all the code you need.

<form action="upload.htm" method="post" enctype="multipart/form-data">
    <input type="file" accept="image/*" capture>
    <input type="submit" value="Upload">
</form>

to know more read this and this

Update

You should use client size cropping which uses canvas to crop it before upload, try DarkroomJS plug in

here is a experiment using jCrop and HTML 5 Canvas for client side crop