时间戳

首页 > 解决方案 > CropperJs 图像在 Vue 中很小，但在编辑后恢复正常大小

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

问题描述

这是一个非常奇怪的行为，我不知道该怎么做，我正在建立一个使用 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。

标签： javascriptvue.jsvuetify.jscropperjs

解决方案

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

推荐阅读