无法从动态数据对象设置裁剪器数据

Question

我正在使用Cropper JS库,我在设置初始化后的裁剪框后设置数据时遇到了一些问题.

https://github.com/fengyuanchen/cropper/blob/master/README.md http://fengyuanchen.github.io/cropper/

我在这里创建了一个JSFiddle http://jsfiddle.net/vs2merje/1/

我的问题是我想在使用动态对象初始化cropbox之后更改以下参数{x,y,w,h}.

var imageURL = "http://i.imgur.com/zIQ92.jpg";
var imageBox = $('.img-container img');

//Initial crop box settings.
var options = {
    aspectRatio: 1/2
};

//If condition is met, create a dynamic settings object to reset the box.
if(imageURL != null){
    console.log("It's not empty, building dedault box!");
    var DefaultCropBoxOptionObj = {
        height: 25,
        width: 25
    };
    console.log(DefaultCropBoxOptionObj);
    imageBox.cropper(options);
    imageBox.cropper('setData', DefaultCropBoxOptionObj);//add the dynamic settings.
    imageBox.cropper('replace', imageURL);

}

正如您在JSFiddle中看到的那样,来自动态框的数据不适用于25px的高度和宽度的框.

谁能给我一些关于为什么会发生这种情况的见解？

谢谢.

Answer 1

解决方案

您需要setCropBoxData在built事件中使用并调用它.

replace似乎有点儿错误(参见问题220 - 使用replace()来更新在reactJS组件中裁剪的图像)但是我们可以通过在构建的事件之后触发一次来使其工作.在这里仅点燃"一次"很重要,因为否则会因为replace触发built事件而创建一个循环.

请注意,由于您正在使用aspectRatio,因此无法同时设置宽度和高度.

我们还DefaultCropBoxOptionObj提前声明以更好地可视化其范围.没有必要,只是为了安心.

$(document).ready(function(){
    var imageURL = "http://i.imgur.com/zIQ92.jpg";
    var imageBox = $('.img-container img');
    var DefaultCropBoxOptionObj = {}; // declare early
    var options = {
        aspectRatio: 1/2,
        built: function() {
            imageBox.cropper('setCropBoxData', DefaultCropBoxOptionObj);
        },
    };

    if(imageURL != null) {
        // init
        imageBox.cropper(options);
        // set params
        DefaultCropBoxOptionObj = {
            width: 25,
            left:  100,
        };
        // replace seems a bit buggy, fire once on built event
        imageBox.one('built.cropper', function(){
            imageBox.cropper('replace', imageURL);
        });
    }

});

演示

http://jsfiddle.net/j73xnbvf/5/

文档的相关部分

由于加载图像时存在异步过程,因此除了"setAspectRatio","replace"和"destroy"之外,您应该在构建之后调用大多数方法.

来源:Image Cropper - README.md - 方法

setCropBoxData(数据)

• 数据:
  • 类型:对象
    • 属性:
    • left:裁剪框左侧的新偏移量
    • 顶部:裁剪框的新偏移顶部
    • width:裁剪框的新宽度
    • height:裁剪框的新高度

使用新数据更改裁剪框位置和大小.

来源:Image Cropper - README.md - setCropBoxData(data)