CropperJs 图像在 Vue 中很小，但在编辑后它会恢复正常大小

Question

这是一个非常奇怪的行为，我不知道该怎么做，我正在使用 Vue.js 和 CropperJs 构建一个用于裁剪图像的网站，主页用户 select他们想要裁剪的图像并单击 'Continue'，下一页显示一个名为 ImageCropper.vue 的组件，canvas 一切都成功显示，但它很小，但假设我编辑了 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设置样式，但是none好像有效果，是不是我用vue的方式有问题？如果重要的话，这是 Vue 和 Vuetify。

Answer 1

有一个可用的包装器，它的 vue-cropperjs，检查一下。

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

Answer 2

问题是裁剪器在其容器不可见时被初始化，因为我使用的是 vuetify 的步进器，裁剪部分出现在用户点击 "continue" 之后，然后是 display: none，但是，当我编辑它时，它是可见的并且 cropper 正在重新初始化，同时它的容器是可见的，因此导致它正常渲染（使用 vue cli 热重新加载）。我不知道这到底是什么原因，但我很确定这不是我这边的编码错误，也许 cropperjs 和 vuetify 的步进器不能很好地协同工作。我通过将 continueClicked 添加到我的 Vuex 状态并将默认设置为 false 来解决它，然后将 @click 侦听器添加到初始的 Continue 按钮，它将 Vuex 中的 continueClicked 设置为 true，添加 v-if="continueClicked" 指令到ImageCropper.vue 组件，像这样： <ImageCropper v-if="continueClicked" />，这样当单击“继续”按钮并且 continueClicked 设置为 true 时，裁剪器会在其容器可见时呈现。

CropperJs 图像在 Vue 中很小，但在编辑后它会恢复正常大小

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

javascript

vue.js

cropperjs

vuetify.js