Vue图片裁剪组件推荐vue-cropper，功能丰富可拓展

官网地址：vue-cropper - npm

1.安装引入 vue-cropper（官网）

  npm install vue-cropper@next
  import 'vue-cropper/dist/index.css'
  import { VueCropper }  from "vue-cropper";

2. 全局引入

import VueCropper from "vue-cropper";
import "vue-cropper/dist/index.css";

const app = createApp(App);
app.use(VueCropper);
app.mount("#app");

3.组件完整代码

<template>
  <div class="avatar-container" @click="editImage()">
    <el-dialog
      :title="title"
      :model-value="dialogVisibleCorpper"
      width="800px"
      append-to-body
      @opened="openDialog"
      :before-close="beforeClose