Why is an image distorted when rotated 90/180deg?

215 views Asked by At

I'am using the CropperJs library to crop and edit an image in an ionic application. I need to resize the image freely using the entire screen as cropbox, So, I had to set the crop box size equal to the width of the device and the remaining height of the container in order.

Here's the instantiation:

const offsetHeight = this.shapeContainer.nativeElement.offsetHeight;
const offsetWidth = this.shapeContainer.nativeElement.offsetWidth

this.cropper = new Cropper(this.image.nativeElement, {
      dragMode: "move",
      aspectRatio:  offsetWidth / offsetHeight,
      minCropBoxWidth: offsetWidth,
      minCropBoxHeight: offsetHeight,
      viewMode: 0,
      restore: false,
      guides: false,
      center: false,
      highlight: false,
      cropBoxMovable: false,
      cropBoxResizable: false,
      toggleDragModeOnDblclick: false,
      modal: false,
      rotatable: true,
      zoomable: true,
      
    });

Export in Base64 :

    this.cropper
        .getCroppedCanvas({
          width:  this.shapeContainer.nativeElement.offsetWidth,
          height: this.shapeContainer.nativeElement.offsetHeight,
          maxHeight: this.shapeContainer.nativeElement.offsetHeight * 4, 
          maxWidth: this.shapeContainer.nativeElement.offsetWidth * 4,
          fillColor: '#000',
          imageSmoothingQuality: 'high'
        })
        .toDataURL("image/jpeg");

HTML:

<div class="image-container" #shapeContainer>
   <img [src]="imageBase64" #image alt="">
</div>

SASS:

.image-container {
  flex: 1;
  position: relative;
  height: 80vh;

  img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
  }
}

When I keep the orientation of the image as the first upload it works great. Here's an example:

enter image description here

The issue comes when i call

this.cropper.rotate(90)

Here's the image that I actually pushed til the edge as the previous one:

enter image description here

I honestly don't know what is going on. I tried everything i could, setting different aspect ratio once the rotate method gets called, changing some options passed through the Cropper class but nothing seems to work. I don't get either if this is a cropperJS bug, even though I don't quite understand why an image in a fixed container with fixed aspect ratio behaves like that.

Does anyone know what's happening?

0

There are 0 answers