Estoy usando la biblioteca CropperJs para recortar y editar una imagen en una aplicación iónica. Necesito cambiar el tamaño de la imagen libremente usando toda la pantalla como cuadro de recorte. Entonces, tuve que establecer el tamaño del cuadro de recorte igual al ancho del dispositivo y la altura restante del contenedor en orden.

Aquí está la instanciación:

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

Exportar en 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>

HABLAR CON DESCARO A:

 .image-container { flex: 1; position: relative; height: 80vh; img { width: 100%; height: auto; display: block; max-width: 100%; } }

Cuando mantengo la orientación de la imagen como la primera carga, funciona muy bien. Aquí hay un ejemplo:

El problema viene cuando llamo

 this.cropper.rotate(90)

Aquí está la imagen que en realidad empujé hasta el borde como la anterior:

Sinceramente, no sé qué está pasando. Intenté todo lo que pude, configurando una relación de aspecto diferente una vez que se llama al método de rotación, cambiando algunas opciones pasadas a través de la clase Cropper, pero nada parece funcionar. Tampoco entiendo si se trata de un error de cropperJS, aunque no entiendo muy bien por qué una imagen en un contenedor fijo con una relación de aspecto fija se comporta así.

¿Alguien sabe lo que está pasando?