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

【问题标题】：CropperJs image is tiny in Vue but after editing it gets back to normal sizeCropperJs 图像在 Vue 中很小，但在编辑后恢复正常大小
【发布时间】：2020-03-24 17:30:23
【问题描述】：

这是一个非常奇怪的行为，我不知道该怎么做，我正在建立一个使用 Vue.js 和 CropperJs 裁剪图像的网站，在主页上用户选择他们想要裁剪的图像并点击'继续'，下一页显示了一个名为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 的方式有问题？这是带有 Vuetify 的 Vue，如果这很重要的话。

【问题讨论】：

标签： javascript vue.js vuetify.js cropperjs

【解决方案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>

【讨论】：

我也用过，结果一样。

【解决方案2】：

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

【讨论】：