Jeroen Bellemans Jeroen Bellemans - 2 months ago 51
Javascript Question

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?

UPDATE on the matter:

This should be te 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" });
}
});
});

Answer

I've finaly found the solution. And it was a silly syntax error... Passing a string instead of a number to the setCropBoxData.

Here's the solution:

$(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 });
    }
  });
});