V2 cropper with Vue doesn't allow image to take full height

[ramicbenjamin]

Hi everyone,

Thanks for creating and maintaining great library.

I'm trying to use cropperjs v2 within my Vue app, but I can't find the option and way for cropper to take full width and height of the image that is being cropped.

Can you help me and point me to the resources where I can find how to make basically something like this: https://agontuk.github.io/vue-cropperjs/

Here is my code:

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

And it produces this:

For this image:

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

Any help would be highly appreciated.

Thanks!

[fengyuanchen]

You can change the height of the <cropper-canvas> directly:

<cropper-canvas style="height: 480px;">
  <!-- ... -->
</cropper-canvas>