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:
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:
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?