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

Question

I have created an application using cropper.js for cropping an images. The application is working and the image is cropping

I have given a fixed image width and height for the cropped image as 160 option like as given below.

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

JSFiddle

But the issue is that when I select an area as width and height somewhat equal as the cropped Image, then I am getting the cropped Image height ans width as 160px like as shown below

but when I select an area where width and height varies in which height is more than width as the cropped Image, then I am not getting cropped Image as height and width as 160px like as shown below

Can anyone please tell me some solution for this

Answer 1

i got the answer after several tweaks, this is my solution and it works, i was trying to set the width to 240px and the height to 507px, upon initialization.

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

and this worked for me perfectly for me... when you console.log the dimensions it all reflects the exact dimensions as the cropped section.