jCrop работает неправильно на мобильном устройстве

Question

У меня есть веб-сайт, который имеет возможность загружать изображение, а затем обрезать. Я использовал библиотеки 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 (это screengrap десктопа)

Шаг 1:

Шаг 2:

Но на мобильных Step2 шоу пустое изображение. Почему это происходит, какие изменения мне нужно сделать?

Answer 1

Я не думаю, что его можно на мобильном телефоне, у вас есть какой-то вариант, чтобы открыть всплывающее окно СМИ на мобильном

Вот 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> 

узнать больше read this и this

Update

Вы должны использовать клиента обрезку размер, который использует холст, чтобы обрезать его перед загрузкой, попробуйте DarkroomJS plug in

здесь эксперимент с использованием jCrop и HTML 5 Холст для посева на стороне клиента