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);
    });
});

同样来自开发者网站的方法我不知道如何实现：

update（none）更新裁剪结果（必须在缩放和拖动后调用）。

getDataURL（无）在客户端上生成裁剪图像的URL（需要符合HTML5标准的浏览器）。

我需要将裁剪后的图像保存到刚刚上传到

的服务器上

任何想法/想法？

谢谢！

Answer 1

嗨，我猜你的代码没有正确回答这个问题：

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

});

在您声明width和height之后，您可以添加另一个参数，即函数回调。并在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) {

});

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

Answer 2

使用 img.getBlob();或img.getDataURL()用于裁剪图片并将数据发送到服务器

寻找简单的cropbox'如何保存'或更新

2 个答案: