vue3图片头像裁剪上传

效果图

1.安装vue-cropper

pnpm add vue-cropper@next

2.组件内引用

import 'vue-cropper/dist/index.css'//引入圖片裁剪
import {
    VueCropper }  from "vue-cropper";

3.html部分

<van-popup v-model:show="showCropper" overlay-class="dialog" @click-overlay="delCropper">
    <div class="button-group">
      <van-button type="success" size="mini" @click="getCropBlob">Confirm</van-button>
      <van-button type="danger" size="mini" @click="delCropper">Cancel</van-button>
    </div>
      <VueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue<