裁剪图像的高度和宽度无法固定为160像素。

Question

我使用cropper.js创建了一个应用程序，用于裁剪图像。该应用程序正在工作，可以对图像进行裁剪。

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

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

JSFiddle

但问题在于，当我选择一个宽度和高度大致相等的区域作为裁剪图像时，我得到的裁剪图像高度和宽度都为160像素，如下所示。

但是当我选择一个宽度和高度不同的区域，其中高度大于宽度作为裁剪图像时，我得到的裁剪图像并不是像下面展示的那样高度和宽度都为160像素。

可以有人告诉我针对这个问题的解决方案吗？

- Alex Man

---

在 cropper.js 中如何覆盖 switch 语句？ - Alex Man

我没有看到可以使最终裁剪成为正方形的选项，因此您需要修改cropper.js本身。打开cropper.js并查看它。虽然这不是最好的解决方案，但是您可以通过使用CSS（和overflow：hidden）来覆盖画布尺寸吗？ - Paul

注意：即使您选择了原始图像的几乎正方形部分，裁剪后的图像也不总是160x160像素，而可能根据您的选择为160x176像素。 - Paul

那么你需要这个函数... $().cropper("getCroppedCanvas")，它会帮助你完成工作。在这里查看实时演示... http://fengyuanchen.github.io/cropper/#overview - bud-e

@Mischievous 我已经尝试过在平板上使用 $image.cropper('getCroppedCanvas', {width: 650,height: 481});，但它没有起作用。 - Alex Man

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

- Ande Caleb