Jquery jCrop在移动设备上工作不正常

我有一个网站，可以选择上传图像，然后裁剪。我使用过jCrop库。它在桌面浏览器上工作正常，但在移动设备上，在选择图像后，不会在弹出窗口中显示图像以进行裁剪

// 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);
}

请查看下面的屏幕截图Step1和step2（这是桌面的屏幕截图）

第1步：

第二步：

---

但在手机上，step2显示的是空图像。为什么会发生这种情况，我需要做哪些更改？

我认为在手机上不可能，您可以选择在手机上打开媒体弹出窗口

以下是用于图像捕获的HTML：

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

捕获视频非常相似；您只需要相应地设置accept属性

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

对于捕获音频，故事是相同的：

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

例如，如果您想使用设备摄像头拍摄照片，并使用HTML表单上传图像，那么这就是您所需的全部代码

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

了解更多

更新

您应该使用客户端大小裁剪，在上载之前使用画布进行裁剪，请重试

---

这是一个在手机上使用HTML 5画布进行客户端裁剪的实验，它被捕获，但不显示在裁剪窗口上