Обрезанное Js изображение имеет крошечный размер Vue, но после редактирования оно возвращается к нормальному размеру

Question

Это очень странное поведение, и я не знаю, что с этим делать, я создаю веб-сайт для обрезки изображений, используя Vue. js и Cropper Js, на главной странице пользователи выбирают изображение они хотят обрезать и нажать «Продолжить», на следующей странице показан компонент с именем ImageCropper.vue, холст и все отображается успешно, но он крошечный, но, скажем, я редактирую html, даже если я добавляю только пустую строку , изображение возвращается к нужному размеру (у меня нет предопределенного размера для него, поэтому оно просто занимает 100% ширины контейнера, а высота, как я полагаю, устанавливается автоматически).

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>

Перед редактированием шаблона:

После редактирования (просто добавлена ​​пустая строка):

Я пытался оформить его с помощью css, но ни один из них, похоже, не повлиял на него, возможно, что-то не так с тем, как я использую vue? Это Vue с Vuetify, если это имеет значение.

Answer 1

Проблема заключалась в том, что cropper инициализировался, когда его контейнер не был виден, так как я использовал степпер vuetify, часть обрезки пришла после того, как пользователь нажал «продолжить», до того, как у него было display: none, когда я редактировал его, хотя, он был виден, и кроппер переинициализировался, в то время как его контейнер был виден, в результате чего он нормально отображался (горячая перезагрузка с vue cli). Я не знаю, что именно является причиной этого, но я почти уверен, что это не ошибка кодирования с моей стороны, возможно, кроппер js и степпер vuetify не очень хорошо работают вместе. Я решил эту проблему, добавив continueClicked в свое состояние Vuex и установив значение по умолчанию false, затем добавил @click listener к начальной кнопке Continue, которая устанавливает continueClicked в Vuex в true, добавив директиву v-if="continueClicked" для компонента ImageCropper.vue, примерно так: <ImageCropper v-if="continueClicked" />, таким образом, когда нажата кнопка «Продолжить» и для continueClicked установлено значение true, обрезка обрабатывается, когда виден ее контейнер.

Answer 2

Для этого есть обертка, vue -cropper js, зацените.

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