Unable to set cropper data from a dynamic data object

Question

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

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/

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.

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.

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

Thank you.

Answer 1

The solution

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

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.

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

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

$(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/

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".

Source: Image Cropper - README.md - Methods

setCropBoxData(data)

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