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

Stack Overflow用户

提问于 2020-03-24 17:30:23

回答 2查看 1.2K关注 0票数 0

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

javascript

vue.js

vuetify.js

cropperjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-25 12:49:01

问题是裁剪被初始化而它的容器是不可见的，因为我正在使用vuetify的stepper，裁剪部分是在用户点击"continue“之后来的，在那之前有display: none，当我编辑它的时候，它是可见的，裁剪正在被重新初始化，而它的容器是可见的，从而导致它正常渲染(热重新加载与vue cli)。我不知道这到底是什么原因，但我非常确定这不是我这边的编码错误，也许cropperjs和vuetify的stepper不能很好地协同工作。我通过将continueClicked添加到我的Vuex状态并将默认值设置为false来解决它，然后将@click listener添加到初始的Continue按钮，该按钮将Vuex中的continueClicked设置为true，并将v-if="continueClicked"指令添加到ImageCropper.vue组件，如下所示：<ImageCropper v-if="continueClicked" />，以这种方式，当单击Continue按钮并将continueClicked设置为true时，当其容器可见时，裁剪程序将被渲染。

票数 0

Stack Overflow用户

发布于 2020-03-24 18:51:10

有一个包装器可用于此，它的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>