jCrop在移動設備上無法正常工作

我有一個網站，它有一個上傳圖像然後裁剪的選項。我已經使用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); 
}

請從下面的截圖第一步和第二步（這是桌面screengrap）

第1步： Step1 When uploading

第2步： Step2

但在移動第二步節目空圖像。爲什麼會發生這種情況，我需要做些什麼改變？

來源

2015-03-02 Rakesh Shetty

我不認爲它可能在移動，你有一些選項，打開移動

這裏媒體彈出是用於圖像拍攝的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

更新

您應該使用客戶端大小裁剪其採用帆布上傳之前裁剪，DarkroomJS plug in

這裏是一個實驗用試jCrop和HTML 5用於客戶端剪裁的Canvas

來源

2015-03-02 11:57:00 Saqueib

在移動設備上它被捕獲但不在裁剪窗口上顯示 – 2015-03-02 12:14:56

嘗試[DarkroomJS]（http://mattketmo.github.io/darkroomjs/）查看更新的答案 – Saqueib 2015-03-02 12:26:04

jCrop在移動設備上無法正常工作

回答

相關問題