CropperJs image is tiny in Vue but after editing it gets back to normal size

Question

This is a very strange behavior and I don't know what to make of it, I'm building a website for cropping images using Vue.js and CropperJs, on homepage users select the image they want to crop and click on 'Continue', next page shows a component called ImageCropper.vue, the canvas and everything is displayed successfully but it's tiny, but let's say I edit the html, even if I add just a blank line, the image gets back to the size it should be (I don't have a predefined size for it, so it just takes 100% of the width of the container and height is auto, I suppose.)

ImageCropper.vue

<template>
    <div class="image-container">
        <img ref="image" :src="source">

    </div>
</template>

<script>
import Cropper from 'cropperjs'

export default {
    name: "ImageCropper",
    props: ["source"],

    data() {
        return {
            cropper: null,
            imageElement: null
        }
    },

    mounted() {
        this.imageElement = this.$refs.image
        this.cropper = new Cropper(this.imageElement, {
                aspectRatio: 1 
        })

    }
}
</script>

Before editing template:

After editing it (just added a blank line):

I tried styling it with css but none seem to have effect on it, maybe there's something wrong with the way I use vue? This is Vue with Vuetify, if that matters.

Anees Hameed Anees Hameed · Accepted Answer · 2020-03-24T18:51:09

There is a wrapper available for this, its vue-cropperjs, check it out.

<template>
 <div>
   <vue-cropper ref="cropper" :src="source" alt="Source Image"></vue-cropper>
   <v-btn @click="save">Save</v-btn>
 </div>
</template>
<script>
  import VueCropper from 'vue-cropperjs';
  import 'cropperjs/dist/cropper.css';

  export default{
    name: "ImageCropper",
    components: {
            VueCropper
    },
    methods: {
      save: function(){
        this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {

          //Do anything with the blob, for eg: attach to form data and send to serve
          const formData = new FormData();
          formData.append("type", "profile");
          formData.append('file', blob, this.fileName);

        });
      }
    }
  }
</script>

CropperJs image is tiny in Vue but after editing it gets back to normal size

2 Answers