使用vue3实现一个图片裁剪的功能

要实现图片裁剪功能，首先需要引入需要的依赖：

import { ref, onMounted, onUnmounted } from 'vue'; // 引入 ref、onMounted、onUnmounted
import Cropper from 'cropperjs'; // 引入Cropper插件
import 'cropperjs/dist/cropper.css'; // 引入Cropper插件的样式文件

然后在组件中定义变量和方法：

<script>
export default {
  // props定义
  props: {
    imgSrc: {
      type: String,
      required: true
    },
    cropperOptions: {
      type: Object,
      default () {
        return {}
      }
    },
    outputType: {
      type: String,
      default: 'jpeg'
    }
  },
  setup (props) {
    const cropper = ref(null) // 定义裁剪插件
    const img = ref(null) // 定义图片

    // 定义成功函数
    const handleLoad = () => {
      // 创建裁剪对象
      cropper.value = new Cropper(img.value, {
        viewMode: 1,
        aspectRatio: 1 / 1,
        preview: '.preview-img',
        ...props.cropperOptions
      })
    }

    // 定义销毁函数
    const handleDestroy = () => {
      if (cropper.value) {
        cropper.value.destroy() // 销毁对象
        cropper.value = null
      }
    }

    // 定义输出函数
    const handleOutput = () => {
      if (cropper.value) {
        const canvas = cropper.value.getCroppedCanvas() // 获取裁剪后的数据
        canvas.toBlob((blob) => {
          const fileReader = new FileReader()
          fileReader.readAsDataURL(blob) // 使用DataURL格式输出
          fileReader.addEventListener('load', () => {
            console.log(fileReader.result) // 输出Base64数据
          })
        }, `image/${props.outputType}`)
      }
    }

    onMounted(() => {
      img.value = document.getElementById('img') // 获取图片对象
      img.value.addEventListener('load', handleLoad) // 加载图片
    })

    onUnmounted(() => {
      handleDestroy() // 组件销毁时销毁对象
    })

    return {
      handleOutput
    }
  }
}
</script>

最后在模板中引用组件的代码如下：

<template>
  <div class="cropper">
    <img :src="imgSrc" ref="img" id="img">
    <div class="text-center mb-2">
      <button class="btn btn-primary btn-sm" @click="handleOutput">确认裁剪</button>
    </div>
    <div class="preview-img" style="width: 100%;height: 100%"></div>
  </div>
</template>

这样就完成了一个图片裁剪的功能。使用时只需要传入图片地址和Cropper的配置参数即可。