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("img");
      // 由于弹窗，确保已获取到
      // 重复获取
      // canvas = document.getElementById("mycanvas");
      if (!canvas) {
        return false;
      } else {
        // 可以理解为一个画笔，可画路径、矩形、文字、图像
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = href;
        img.setAttribute("crossOrigin", "anonymous");//此项是设置跨域使用，需服务器设置跨域，否则图片不显示，canvas.todataurl会报错!说明看此图[在这里插入图片描述](https://img-blog.csdnimg.cn/7918f89fd1c7450bb58799573af6e7da.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0dGRkZDg4OA==,size_16,color_FFFFFF,t_70#pic_center)


        // 加载图片
        img.onload = function () {
          if (img.complete) {
            // 根据图像重新设定了canvas的长宽
            canvas.setAttribute("width", img.width);
            canvas.setAttribute("height", img.height);
            // 绘制图片
            context.drawImage(img, 0, 0, img.width, img.height);
            context.strokeStyle = "red";
            context.lineWidth = 3;
          }
        };
      }
    },
    // 显示裁剪框
    initCropper() {
      this.doDraw();
      let cropper = new Cropper(this.$refs.canvas, {
        checkCrossOrigin: true, //cropperjs的配置详情请看文档
        viewMode: 0,
        aspectRatio: 3 / 3,
        autoCropArea: 0.5,
      });
      this.cropper = cropper;
    },
    // 确认裁剪
    sureCropper() {
      let _this = this;
      this.cropper.getCroppedCanvas().toBlob(function (blob) {
        const href = window.URL.createObjectURL(blob);
        console.log(href); //http://localhost:8081/95bc908a-4fe2-4501-b7bf-8515dc8cbeb9
        _this.save(href); //图片保存
      }, "image/jpeg");

      this.cancelCropper();
    },
    // 销毁裁剪框
    cancelCropper() {
      if (this.cropper != null) {
        this.cropper.destroy();
        this.cropper = null;
      }
    },
    // 保存
    save(href) {
      console.log("保存");
      let time = new Date().getTime();
      let eleLink = document.createElement("a");
      eleLink.download = "image_" + time + ".jpg";
      eleLink.href = name;
      eleLink.click();
      eleLink.remove();
    },