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

Question

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

我已经为裁剪后的图像提供了固定的图像宽度和高度作为 160 选项，如下所示。

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

<强> JSFiddle

但问题是，当我选择宽度和高度与裁剪后的图像稍稍相等的区域时，我会得到裁剪后的图像高度和宽度为 160px 的内容，如下所示

但是当我选择宽度和高度变化的区域(其中高度大于裁剪图像的宽度)时，我不会将图像裁剪为高度和宽度为 160px，如下所示

谁能告诉我一些解决方案

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

这对我来说非常适合...当您console.log尺寸时，它都反射(reflect)了裁剪部分的确切尺寸。