fengyuanchen cropper how to set up dynamic fixed crop box

I'm using a crop tool from fengyuanchen, which has awesome features. I'm trying to make a fixed crop-box with dynamic sizes.

But I'm currently stuck just on how to figger out how to make it a certain size.

I've tried the following:

$(function()

$('.img-container > img').cropper(
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
setCropBoxData('1600', '1200')
);

);


But setCropBoxData doesn't work for me. What am I doing wrong?

setCropBoxData

UPDATE

This should be the correct syntax to set up a fixed width for that actual cropbox, but I still don't get any results:

$(function()
var $toCrop = $('.img-container > img');

$toCrop.cropper(
aspectRatio: 16 / 9,
autoCropArea: true,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
built: function ()
$toCrop.cropper("setCropBoxData", width: "100", height: "50" );

);
);


2 Answers
2

I've finaly found the solution. My mistake was that I was passing string instead of number as parameters to setCropBoxData function.

string

number

setCropBoxData

Here is the correct syntax:

$(function()
var $toCrop = $('.img-container > img');

$toCrop.cropper(
aspectRatio: 16 / 9,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
built: function ()
// Width and Height params are number types instead of string
$toCrop.cropper("setCropBoxData", width: 1600, height: 800 );

);
);


Go back and re-read the "Methods" section of the documentation. That shows you how to invoke functions like that. Also note that "setCropBoxData" expects an object with "top", "left", "width", and "height" properties:

$(function()
var $img = $('.img-container > img');
$img.cropper(
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
);
$img.cropper("setCropBoxData", width: "1600", height: "1200" );
);


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.