尋找簡單的裁剪框「如何保存」或更新

Question

我有這個從的jsfiddle：

$(function() { 

    var r = $('#results'), 
     x = $('.cropX', r), 
     y = $('.cropY', r), 
     w = $('.cropW', r), 
     h = $('.cropH', r); 
    $('.cropbox').cropbox({ 
     width: 920, 
     height: 356 
    }).on('cropbox', function (event, results, img) { 
     var crop = $('.cropbox').data('cropbox'); 
     x.text(results.cropX); 
     y.text(results.cropY); 
     w.text(results.cropW); 
     h.text(results.cropH); 
     console.log(crop.result); 
     //alert(event); 
    }); 
}); 

也從開發商的網站有方法，我不知道如何實現：

更新（無）更新裁剪結果（必須在縮放和拖動後調用）。

getDataURL（無）生成客戶端上裁剪圖像的URL（需要HTML5兼容瀏覽器）。

我需要裁剪圖像保存到它只是上傳到

任何想法/主意服務器？

謝謝！

Answer 1

使用 img.getBlob();或img.getDataURL()用於裁剪圖像和數據發送到服務器

Answer 2

您好我想沒有身體已經在你的代碼回答正確這個問題：你在哪裏聲明width和height後

$('.cropbox').cropbox({ 
    width: 920, 
    height: 356 
}).on('cropbox', function (event, results, img) { 

}); 

你可以添加另一個參數，這是一個函數回調。並在on crop事件結束時觸發。

所以你可以做到這一點。

$('.cropbox').cropbox({ 
    width: 920, 
    height: 356 
}, function(){ 
    //this is the callback 
    //now you can do 
    this.getBlob(); 
    this.getDataURL(); 
}).on('cropbox', function (event, results, img) { 

}); 

實際上這是在文檔中解釋的。但如果有人錯過了這個答案。