Estoy tratando de usar cropperjs v2 dentro de mi aplicación Vue, pero no puedo encontrar la opción y la forma en que cropper toma el ancho y el alto completos de la imagen que se está recortando.

¿Puede ayudarme y señalarme los recursos donde puedo encontrar cómo hacer básicamente algo como esto: https://agontuk.github.io/vue-cropperjs/

Aquí está mi código:

 <template> <div> <img ref="cropperImage" :src="imageUrl" alt="Cropper Image." class="block max-w-full" /> </div> </template> <script lang="ts"> import Cropper from 'cropperjs'; import { Component, Prop, Ref, Vue } from 'vue-property-decorator'; @Component export default class ImageCropper extends Vue { @Prop({ type: String, required: true }) readonly imageUrl!: string; @Ref() readonly cropperImage!: HTMLImageElement; cropper: Cropper | undefined; mounted() { this.cropper = new Cropper(this.cropperImage); } } </script>

Y produce esto:

Para esta imagen:

https://i.picsum.photos/id/586/1600/900.jpg?hmac=rEPQN9kLTvjDkNQEqYhLukHWcJlKUtTGl-u2hmgXIkc