如何在jquerycropper中设置裁剪框

Question

我正在使用cropper，它是我在cropper网站上找到的一个jquery插件。
我有一个全高清 1920w、1080h 的图像尺寸，我需要让用户能够在固定框尺寸 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

经过如此多次的试验，这对我有用......我需要将初始宽度和高度设置为 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 2

尝试像这样添加 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);

            }
        });