jCrop 在移动设备上无法正常工作

Posted

技术标签:

【中文标题】jCrop 在移动设备上无法正常工作【英文标题】:jCrop is not working properly on mobile device 【发布时间】:2015-03-02 11:46:07 【问题描述】:

我有一个网站,可以选择上传图片然后进行裁剪。我使用过 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 步:

第 2 步:

但在移动 step2 上显示空白图像。为什么会发生这种情况,我需要做出哪些改变?

【问题讨论】:

【参考方案1】:

我认为这在移动设备上是不可能的,您可以选择在移动设备上打开媒体弹出窗口

这是用于图像捕获的 HTML:

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

捕捉视频非常相似;你只需要相应地设置接受属性。

<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>

了解更多read this和this

更新

你应该使用客户端大小裁剪,在上传之前使用画布裁剪它,试试DarkroomJS plug in

这是一个使用jCrop 和 HTML 5 Canvas 进行客户端裁剪的实验

【讨论】:

在移动设备上它被捕获但不显示在裁剪窗口中

以上是关于jCrop 在移动设备上无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 导航栏在移动设备上无法正常工作

Qt/QML SwipeDelegate 在移动设备(Android、iOS)上无法正常工作

Jquery:下拉菜单在移动设备上无法正常工作

CSS字体大小在移动设备上无法正常工作

location.reload() 在移动设备中无法正常工作

css 在-webkit上滚动:当您使用overflow:hidden时,在移动设备上滚动无法正常工作