I use the "cropper" https://github.com/fengyuanchen/cropper

I choose an image for cropper:

var image = $('#cropper > img');

I get the default data from the hidden input'a:

 var cropData = $("#params").val();

I initialize the cropper myself:

  image.cropper({ aspectRatio: 1, autoCropArea: 0.65, zoomable: false, minCropBoxWidth: 50, minCropBoxHeight: 50, data: cropData, });

The data parameter does not receive data from cropData , but if you specify something like:

 data: {"x":420.84485791610285,"y":100.70209742895806,"width":349.70000000000005,"height":349.70000000000005,"rotate":0},

That all works.

Conclusion:

 console.log(cropData) {"x":420.84485791610285,"y":100.70209742895806,"width":349.70000000000005,"height":349.70000000000005,"rotate":0},

Help to set the parameter correctly ... In JS and jQuery, it is never strong. Thank.

  • The data from the input gets cropData. <input id = "params" name = "cropper_coords" type = "hidden" value = "{x & quot;: 205.29905277401895, & quot; y & quot;: 50.232746955345064, & quot; width & quot;: 401.8619756427605, & quot; height & pattern; ; rotate & quot ;: 0} "> - rolf

1 answer 1

  1. Probably $("#params").val() returns the string, and you need an object. The solution is simple: var cropDataJSON = JSON.parse(cropData);

  2. The comma confuses me a little, it should not work with an extra comma at the end:

      image.cropper({ aspectRatio: 1, autoCropArea: 0.65, zoomable: false, minCropBoxWidth: 50, minCropBoxHeight: 50, // вот так было // data: cropData, // вот так надо: data: cropData });
  • Thank! so it works. With a comma and without running! There is no comma in fact, there are more options there) - rolf
  • Click the check mark under the response rating to mark it as correct. Thank. - Sergey Snegirev
  • Modern browsers clean up the comma themselves (Chrome, IE11), but the old ones do not. Checked in IE9 - the code falls with the error Expected identifier, string or number - Sergey Snegirev
  • one
    @MakarovAV, by the way, in my opinion, are cleaning up :) If typing is not strict, then at least the syntax would be more or less strictly followed ... And in HTML - so all terrible things are happening. In the style of <select><option>xxx<option><option>yyy<option></select> from a recent question. - Regent
  • one
    @SergeySnegirev, use strict behavior dangling commas do not change, the role of "or whatever" is performed by JSLint - Duck Learns to Take Cover