寻找简单的裁剪框“如何保存”或更新

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

}); 

实际上这是在文档中解释的。但如果有人错过了这个答案。