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

【问题标题】：cropped image height and width not getting fixed as 160px裁剪的图像高度和宽度未固定为 160px
【发布时间】：2015-07-02 14:41:52
【问题描述】：

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

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

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

JSFiddle

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

但是当我选择一个宽度和高度不同且高度大于宽度的区域作为裁剪图像时，我不会将图像裁剪为高度和宽度为 160px，如下所示

谁能告诉我一些解决方法

【问题讨论】：

cropper.js 考虑了纵横比（参见函数 r()），提供的高度和宽度值只是最小值。您需要覆盖cropper.js 中的switch 语句才能根据需要裁剪图像。
覆盖cropper.js中的switch语句，比如以哪种方式
我没有看到使最终裁剪成正方形的选项，因此您需要破解cropper.js 本身。打开cropper.js 并查看它。不过，这不是最好的解决方案。用 CSS（和溢出：隐藏）覆盖画布尺寸怎么样？
请注意：即使您选择原始图像的几乎正方形部分，裁剪后的图像也不会始终为 160x160px，而是根据您的选择为 160x176px。
@Paul 所以你的意思是如果我放宽高比，一切都会好起来的

标签： javascript jquery html image crop

【解决方案1】：

经过几次调整后我得到了答案，这是我的解决方案，它有效，我试图在初始化时将宽度设置为 240 像素，高度设置为 507 像素。

       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 尺寸时，它都反映了裁剪部分的确切尺寸。

【讨论】：