fengyuanchen cropper 如何设置动态固定裁剪框

Question

我正在使用 crop tool from fengyuanchen，它的功能非常棒。我正在尝试制作一个具有动态尺寸的固定裁剪框。

但我目前只是想弄清楚如何使它达到一定的大小。

我试过以下方法：

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

});

但是 setCropBoxData 对我不起作用。我做错了什么？

更新

这应该是为实际裁剪框设置固定宽度的正确语法，但我仍然没有得到任何结果：

$(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 1

返回并重新阅读文档的 "Methods" 部分。这向您展示了如何调用这样的函数。另请注意，"setCropBoxData" 需要一个具有 "top"、"left"、"width" 和 "height" 属性的对象：

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

Answer 2

我终于找到了解决办法。我的错误是我将 string 而不是 number 作为参数传递给 setCropBoxData 函数。

正确的语法如下：

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

fengyuanchen cropper 如何设置动态固定裁剪框

fengyuanchen cropper how to set up dynamic fixed crop box

javascript

jquery

crop