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似乎有点儿错误（参见issue 220 - Using replace() to update image to be cropped in a reactJS component）但我们可以通过在构建的事件之后触发一次来使其工作。仅限射击＆＃34;一次＆＃34;这里很重要，因为它会创建一个循环，因为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/

文件的相关部分

由于在加载图像时存在异步过程，因此在构建之后应该调用大多数方法，除了＆＃34; setAspectRatio＆＃34;，＆＃34;替换＆＃34;和＆＃34;销毁＆＃34;。

来源：Image Cropper - README.md - Methods

<强> setCropBoxData（数据）


数据：

类型：对象

属性：

left：裁剪框左侧的新偏移量

top：裁剪框的新偏移顶部

width：裁剪框的新宽度

height：裁剪框的新高度






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

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

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

1 个答案:

解决方案

演示

文件的相关部分