Question

我使用了cropper，它是我在cropper web site找到的jquery插件。
我有一个1080h的图像大小全高清1920w，我需要让用户能够在固定的盒子大小675 * 1080裁剪，我的问题是如何设置这个插件的选项？
我尝试过以后没有成功：

var c1 = $('.cropper-example-1 img').cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
            }
        });

Answer 1

尝试这样添加autoCropArea: 0.5,并更改构建的方法

var $image=$('.cropper-example-1 img');

$image.cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
             autoCropArea: 0.5,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
                $image.cropper('setCanvasData', 0, 0, 1920, 1080));
                $image.cropper('setCropBoxData', 0, 0, 675, 1080);

            }
        });

Answer 2

built: function () {

//$image.cropper('setCropBoxData', 0, 0, 675, 1080);

$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });

}

Answer 3

经过很多次试验后，这对我有用...我需要将初始宽度和高度设置为240px x 607px，这是我的代码。

       var cropper;
       var imgx;

        $(function(){
            var imgx = $('#cpdiv').find('img');
            cropper = new Cropper(imgx[0], {                    
                //aspectRatio: 1/2,
                autoCropArea: 0,
                strict: false,
                guides: false,
                highlight: true,
                dragCrop: false,
               //cropBoxMovable: false,
                cropBoxResizable: false,

                data:{
                    width: 240,
                    height:  607,
                },

                crop(event) {
                    console.log(event.detail.width);
                    console.log(event.detail.height);
                },

            });

     });

我尝试使用setCropBoxData（{}）函数，该函数不起作用..但是这种方法对我有用。

Answer 4

尝试在cropper.js上限制它的高度和宽度..不是最好的选择，但它解决了我的问题。当用户尝试最小化cropbox时，它将停在设定的大小，为现在创建一个不太糟糕的解决方案..：'）

minCropBoxWidth：350， minCropBoxHeight：350

Answer 5

用于设置裁剪框的工作代码。我正在使用jQuery Cropper v1.0.0

  var $image = $(".image-crop > img");
  var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };

  $($image).cropper({
      zoomable: false,
      aspectRatio: 2 / 1,
      preview: ".img-preview",
      crop: function(event) {
        $("#event_crop_x").val(event.detail.x);
        $("#event_crop_y").val(event.detail.y);
        $("#event_crop_w").val(event.detail.width);
        $("#event_crop_h").val(event.detail.height);
       },
      data: init_data
  });

Answer 6

如果要使CropBox选择适合Canvas，请使用此选项 autoCropArea：1，

要使CropBox选择具有来自画布的50％的余量 autoCropArea：0.5，

如何在jquery cropper中设置裁剪框

6 个答案: