无法从动态数据对象中设置cropper数据。

I'm using the Cropper JS library and I'm having some issues setting the data after the crop box after it's initialized.

我使用的是Cropper JS库，在它被初始化之后，我有一些问题设置数据。

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

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

I've created a JSFiddle here http://jsfiddle.net/vs2merje/1/

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

My issue is that I want to change the following params {x,y,w,h} after the cropbox has been initialized with a dynamic object.

我的问题是，我希望在使用一个动态对象初始化cropbox之后，更改下面的params {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);

}

As you can see in the JSFiddle, the data from the dynamic box is not applying to the box to the height and width of 25px.

正如您在JSFiddle所看到的，来自动态框的数据并不适用于25px的高度和宽度。

Can anyone give me some insights on to why this happening?

有人能告诉我为什么会发生这种事吗?

Thank you.

谢谢你！

1 个解决方案

#1

The solution

You need to use setCropBoxData and call it in a built event.

您需要使用setCropBoxData并在一个已构建的事件中调用它。

replace seems a bit buggy (see issue 220 - Using replace() to update image to be cropped in a reactJS component) but we can get it working by firing once after a built event. Firing only "once" is important here, since it would otherwise create a loop because replace fires the built event.

replace(参见第220期——使用replace()更新将被裁剪到一个反应堆js组件中的图像)似乎有点麻烦，但我们可以在构建事件之后再启动一次，以使其工作。在这里，只触发一次是很重要的，因为否则会创建一个循环，因为replace将触发已构建的事件。

Note that since you are using aspectRatio, you can't set both width and height.

请注意，由于您正在使用aspectRatio，所以不能同时设置宽度和高度。

We also declare DefaultCropBoxOptionObj early to better visualize its scope. Not really necessary, just for the peace of mind.

我们也要尽早声明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);
        });
    }

});

The demo

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

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

The relevant parts of the documentation

As there is an asynchronous process when load the image, you should call most of the methods after built, except "setAspectRatio", "replace" and "destroy".

由于在加载映像时存在异步进程，所以应该在构建后调用大多数方法，除了“setAspectRatio”、“替换”和“销毁”。

Source: Image Cropper - README.md - Methods

来源:图像Cropper - README。md -方法

setCropBoxData(data)

setCropBoxData(数据)

• data:
  • Type: Object
    • Properties:
    • 属性:
    • left: the new offset left of the crop box
    • 左:作物盒的新偏移
    • top: the new offset top of the crop box
    • 顶部:新的补偿顶部的作物盒
    • width: the new width of the crop box
    • 宽度:作物盒的新宽度。
    • height: the new height of the crop box
    • 高度:作物箱的新高度。
  • 类型:对象属性:左:裁切框顶部的新偏移量:裁切框宽度的新偏移量:作物箱高度的新宽度:作物箱的新高度。
• 数据:类型:对象属性:左:收获盒顶部的新偏移量:收获盒宽度的新偏移量:收获盒高度的新宽度:收获盒的新高度

Change the crop box position and size with new data.

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

Source: Image Cropper - README.md - setCropBoxData(data)

来源:图像Cropper - README。md - setCropBoxData(数据)