Vue实现简单基础的图片裁剪功能

<template>
  <div>
    <div class="wrap">
      <canvas id="canvas" ref="imgCanvas"></canvas>
      <canvas
        id="drawCanvas"
        ref="drawCanvas"
      ></canvas>
    </div>
  </div>
</template>

<style>
#drawCanvas {
  position: absolute;
  top: 0;
  left: 0;
}
.wrap {
  position: relative;
}
</style>

    let imgCanvas = this.$refs.imgCanvas;//绘制图片的canvas
    let drawCanvas = this.$refs.drawCanvas;//绘制框选款的canvas
    //设置两个canvas的宽高
    imgCanvas.width = this.width;
    imgCanvas.height = this.height;
    drawCanvas.width = this.width;
    drawCanvas.height = this.height;
    //获取两个canvas的上下文并且保存在data中
    this.ctx = drawCanvas.getContext("2d");
    this.imgCtx = imgCanvas.getContext("2d");
    //加载图片
    let img = new Image();
    img.src = "https://www.auok.ltd/background.jpg";
    img.crossOrigin = "anonymous";
    img.onload = () => {
      console.log("加载完成", img);
      //图片加载完成后开始绘制图片
      this.imgCtx.drawImage(img, 0, 0, this.width, this.height);
    };

<template>
  <div>
    <div class="wrap">
      <canvas id="canvas" ref="imgCanvas"></canvas>
      <canvas
        id="drawCanvas"
        ref="drawCanvas"
        @mousedown="onMouseDown"
        @mousemove="onMouseMove"
        @mouseup="onMouseUp"
        @mouseleave="onMouseLeave"
      ></canvas>
    </div>
    <img :src="curSrc" alt="" style="margin: 10px 10px 0 0" />
    <canvas id="outCanvas"></canvas>
  </div>
</template>

 onMouseDown(e) {
      console.log("鼠标按下", e.offsetX, e.offsetY);
      this.downPoint = [e.offsetX, e.offsetY];
      this.down = true;
      this.ctx.strokeStyle = "#fff";
      this.ctx.lineWidth = 2;
    }

   onMouseMove(e) {
   //鼠标未按下不执行操作
      if (!this.down) {
        return;
      }
    console.log("鼠标移动", e.offsetX, e.offsetY);
    //当前鼠标移动的位置
    let movePoint = [e.offsetX, e.offsetY];
      this.ctx.fillStyle = "rgba(0,0,0,.5)";//设置遮罩层填充颜色
      //清空drawCanvas
      this.ctx.clearRect(0, 0, this.width, this.height);
      //使用设置的填充颜色来设置drawCanvas的颜色
      this.ctx.fillRect(0, 0, this.width, this.height);
      //清除指定区域的颜色，因为需要绘制的选框中间是没有颜色的，不然的话选框区域都是遮罩层的颜色。如下图
      this.ctx.clearRect(
        downPoint[0],
        downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
      //绘制描边矩形 四个参数是x坐标 ， y坐标 ， 矩形的长，矩形的宽
      this.ctx.strokeRect(
        downPoint[0],
        downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
    },

    onMouseUp(e) {
        console.log("鼠标抬起", e.offsetX, e.offsetY);
        //获取坐标
        let upPoint = [e.offsetX, e.offsetY];
        //重置鼠标按下状态
        this.down = false;
        //获取指定区域的图片数据
        let cutImgData = this.imgCtx.getImageData(
          this.downPoint[0],
          this.downPoint[1],
          upPoint[0] - this.downPoint[0],
          upPoint[1] - this.downPoint[1]
        );
        //获取返回的图片数据中的宽高
        let { width, height } = cutImgData;
        console.log(cutImgData);
        //创建一个用于放置图片的canvas用来输出图片
        let outCanvas = document.createElement("canvas");
        let outCtx = outCanvas.getContext("2d");
        outCanvas.height = height;
        outCanvas.width = width;
        //将图片放置到canvas上
        outCtx.putImageData(cutImgData, 0, 0);
        //以blob的形式输出图片
        outCanvas.toBlob((blob) => {
          this.curSrc = URL.createObjectURL(blob);
    }

  <img :src="curSrc" alt="" style="margin: 10px 10px 0 0" />