vue3+vant+cropper.js实现移动端图片裁剪功能

<template>
  <view class="container">
    <van-cell-group>
      <van-cell title="头像" is-link>
        <template #default>
          <view class="avatar" @click="onClickCrop">
            <image :src="cropImage" class="avatar-img"></image>
          </view>
        </template>
      </van-cell>
    </van-cell-group>
    <van-popup v-model="showCropper" position="bottom" :style="{ height: '60%' }">
      <view class="cropper-content">
        <vue-cropper
          ref="cropper"
          :guides="false"
          :src="imageUrl"
          :min-container-width="300"
          :min-container-height="200"
          :background="true"
          :responsive="true"
          :center-box="true"
          output-type="png"
          @ready="onReady"
          @cropend="onCropend"
        />
        <view class="cropper-buttons">
          <van-button size="small" type="primary" @click="onCancelCrop">取消</van-button>
          <van-button size="small" type="info" @click="onConfirmCrop">确认</van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>
 
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import { VueCropper } from 'vue-cropper';
 
export default {
  components: {
    VueCropper
  },
  setup() {
    const cropper = ref(null);
    const imageUrl = ref('path/to/your/image.jpg'); // 待裁剪的图片路径
    const cropImage = ref('path/to/your/croped/image.jpg'); // 裁剪后的图片路径
    const showCropper = ref(false);
 
    const onReady = () => {
      // 裁剪器准备好后的回调
    };
 
    const onCropend = (data) => {
      // 裁剪操作完成后的回调
      cropImage.value = data.imgUrl;
    };
 
    const onClickCrop = () => {
      showCropper.value = true;
    };
 
    const onCancelCrop = () => {
      showCropper.value = false;
    };
 
    const onConfirmCrop = () => {
      if (cropper.value) {
        cropper.value.getCropData((imgData) => {
          // 将裁剪后的图片展示出来
          cropImage.value = imgData;
          showCropper.value = false;
          Toast.success('裁剪成功');
        });
      }
    };
 
    return {
      cropper,
      imageUrl,
      cropImage,
      showCropper,
      onReady,
      onCropend,
      onClickCrop,
      onCancelCrop,
      onConfirmCrop
    };
  }
};
</script>
 
<style scoped>
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  b