Vue3+cropperjs 实现图像裁剪功能

npm install cropperjs --save
或者
yarn add cropperjs

//cropperImg.vue
<template>
  <div>
    <!--使用ref属性给图片元素命名为imageRef-->
    <img ref="imageRef" :src="imageSrc" alt="image" >
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>
<script setup>
import {ref, onMounted, onBeforeUnmount} from "vue";
  import Cropper from 'cropperjs';
  import "cropperjs/dist/cropper.css";
  const props = defineProps({
    //图片地址
    imageSrc: {
      type: String,
      required: true
    },
    //aspectRatio:置裁剪框为固定的宽高比
    aspectRatio: {
      type: Number,
      default: 1,
    },
    //viewMode: 视图控制
    viewMode: {
      type: Number,
      default: 1,
    },
    //autoCropArea: 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
    autoCropArea: {
      type: Number,
      default: 1,
    },
  })
  //绑定图片的dom对象
  const imageRef = ref(null)
  let cropper = null;
  //使用Cropper构造函数创建裁剪器实例，并将图片元素和一些裁剪选项传入
  onMounted(() => {
    cropper = new Cropper(imageRef.value, {
      aspectRatio: props.aspectRatio,
      viewMode: props.viewMode,
      autoCropArea: props.autoCropArea,
    });
  });
  //定义方法
  const emit = defineEmits(['updateImageSrc'])
  //在cropImage函数中，获取裁剪后的图片数据URL，并使用emit方法触发updateImageSrc事件，
  // 将裁剪后的图片数据URL传递给父组件。
  const cropImage = () => {
    const canvas = cropper.getCroppedCanvas();
    const croppedImage = canvas.toDataURL();
    emit('updateImageSrc', croppedImage);
  }
  //销毁
  onBeforeUnmount(()=>{
    cropper.destroy()
  })
</script>

<template>
  <cropper-img :imageSrc="imageSrc" @updateImageSrc="updateImageSrc" />
  <div>
    <p>预览图片</p>
    <img :src="imageNew" alt="">
  </div>
</template>
<script setup>
import {reactive, ref,} from "vue";
import CropperImg from "../../components/cropperImg.vue";
const imageSrc = ref('https://cdn.tehub.com/uploads/bCChGvhsbU/u/avatar/a2885f74-5400-48a1-fa93-a0bbdb7bddd6.jpeg?imageView2/1/w/200/h/200/q/100')
//定义一个imageNew变量来接收裁剪之后的图片
const imageNew = ref()
//点击裁剪按钮
const updateImageSrc = (updateImageSrc) => {
  imageNew.value = updateImageSrc
}
</script>