裁剪后的图像高度和宽度未固定为160px

Question

我使用 cropper.js 创建了一个用于裁剪图像的应用程序。应用程序正在运行，图像正在裁剪

我已将裁剪后的图像的固定图像宽度和高度设为160选项，如下所示。

$("#getCropped").click(function () {
    $('#croppedImage').html($image.cropper('getCroppedCanvas', {
       width: 160,
       height: 160
    }));
});

JSFiddle

但问题是，当我选择一个区域的宽度和高度与裁剪的图像有些相等时，我得到的裁剪图像高度和宽度为160px，如下所示

但是当我选择一个宽度和高度变化的区域，其高度大于宽度作为裁剪后的图像，那么我没有裁剪图像高度和宽度为160像素，如下图所示

任何人都可以告诉我一些解决方案吗

Answer 1

经过几次调整后我得到了答案，这是我的解决方案，它可以正常工作，我试图在初始化时将宽度设置为240px，将高度设置为507px。

       var cropper;
       var imgx;

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

                data:{
                    width: 160,
                    height: 160,
                },

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

这对我来说非常适合...当您控制台记录尺寸时，所有尺寸都反映了裁剪部分的确切尺寸。