vue 使用 cropperjs 进行图片裁剪

1、先安装依赖包

npm i cropperjs --save

2、在所需要使3用的页面引入

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

3、裁剪区域

 data() {
    return {
      cropper: null,
    };
  },

  

4、canvas进行绘制

<canvas ref="canvas" width="100%" height="100%" id="img"></canvas>
          <div class="cut_btn">
            <el-tooltip content="取消裁剪" placement="left" v-if="cropper">
              <el-button
                type="danger"
                size="small"
                @click="cancelCropper()"
                v-if="cropper"
                ><i class="el-icon-close"></i
              ></el-button>
            </el-tooltip>
            <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
              <el-button type="success" size="mini" @click="sureCropper()"
                ><i class="el-icon-check"></i
              ></el-button>
            </el-tooltip>
          </div>

5、方法

    // imageUrl为后台提供图片地址
    doDraw(href) {
   
      // 获取canvas
      var canvas = document.getElementById(