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

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" });
    }
  });
});

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

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" });
    }
  });
});

• javascript
• jquery
• crop

• 1 Check your browser console: the code you posted is syntactically incorrect, and you'll see an error. – Pointy Commented Jul 14, 2015 at 13:12

2 Answers 2

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

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" });
});