vue cropper用法 vue3

vue-cropper是一个基于Vue.js的图片裁剪组件，它可以让用户在网页上进行图片的裁剪操作。在Vue3中使用vue-cropper可以按照以下步骤进行：

1. 首先，通过npm或yarn安装vue-cropper模块：

npm install vue-cropper@latest --save

2. 在你的Vue组件中导入vue-cropper模块：

import VueCropper from 'vue-cropper'

3. 在Vue组件内使用vue-cropper，并传入相关的属性和事件：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :outputType="'dataUrl'"
      :guide="'false'"
      :backgroundColor="'transparent'"
      :autoCrop="'true'"
      :autoCropWidth="200"
      :autoCropHeight="200"
      @crop-end="cropped"
    ></vue-cropper>
    <button @click="crop">裁剪</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'your-image-url',
    }
  },
  methods: {
    crop() {
      const cropper = this.$refs.cropper
      const croppedImage = cropper.getCroppedCanvas()
      // 使用croppedImage进行后续操作，比如上传到服务器。
    },
    cropped(result) {
      // 当裁剪完成后会触发crop-end事件，并将裁剪结果作为参数传入。
      console.log(result)
    },
  },
}
</script>

通过以上步骤，你就可以在Vue3中使用vue-cropper进行图片的裁剪操作了。注意，你需要将"your-image-url"替换为你自己的图片链接，且需要在crop方法中进行相关的操作，比如将裁剪结果上传到服务器。同时，你也可以根据自己的需求对vue-cropper的属性进行调整。