Unable to set crop data from dynamic data object

Question

I use the Cropper JS library, and I am having some problems setting up data after the crop field after it is initialized.

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

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

My problem is that I want to change the following parameters {x, y, w, h} after initializing the cropping 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 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 JSFiddle, data from a dynamic window does not apply to a field with a height and width of 25 pixels.

Can anyone tell me why this is happening?

Thanks.

Answer 1

Decision

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

replace seems a bit flawed (see issue 220 - Using replace () to update an image that needs to be cropped in the responseJS component ), but we can get it to work by firing once after the inline event. Shooting is important here only once, because otherwise it would create a loop, because replace fires the built event.

Please note that since you are using aspectRatio , you cannot set the width and height.

We also declare DefaultCropBoxOptionObj earlier in order to better visualize its scope. Not necessarily, just for 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); }); } }); 

Demo

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

Relevant parts of the documentation

Since an asynchronous process occurs when loading the image, you should call most methods after assembly, except for "setAspectRatio", "replace", and "destroy".

Source: Cropper Image - README.md - Methods

setCropBoxData (data)

• data:
  • Type: Object
    • Properties:
    • left: a new offset to the left of the crop field
    • top: new top top trim box
    • width: new cropping field width
    • height: new cropping frame height

Change the position and size of the cropping field with the new data.

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