<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
    //設(shè)置兩個(gè)canvas的寬高
    imgCanvas.width = this.width;
    imgCanvas.height = this.height;
    drawCanvas.width = this.width;
    drawCanvas.height = this.height;
    //獲取兩個(gè)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("鼠標(biāo)按下", e.offsetX, e.offsetY);
      this.downPoint = [e.offsetX, e.offsetY];
      this.down = true;
      this.ctx.strokeStyle = "#fff";
      this.ctx.lineWidth = 2;
    }

   onMouseMove(e) {
   //鼠標(biāo)未按下不執(zhí)行操作
      if (!this.down) {
        return;
      }
    console.log("鼠標(biāo)移動(dòng)", e.offsetX, e.offsetY);
    //當(dāng)前鼠標(biāo)移動(dòng)的位置
    let movePoint = [e.offsetX, e.offsetY];
      this.ctx.fillStyle = "rgba(0,0,0,.5)";//設(shè)置遮罩層填充顏色
      //清空drawCanvas
      this.ctx.clearRect(0, 0, this.width, this.height);
      //使用設(shè)置的填充顏色來設(shè)置drawCanvas的顏色
      this.ctx.fillRect(0, 0, this.width, this.height);
      //清除指定區(qū)域的顏色，因?yàn)樾枰L制的選框中間是沒有顏色的，不然的話選框區(qū)域都是遮罩層的顏色。如下圖
      this.ctx.clearRect(
        downPoint[0],
        downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
      //繪制描邊矩形 四個(gè)參數(shù)是x坐標(biāo) ， y坐標(biāo) ， 矩形的長，矩形的寬
      this.ctx.strokeRect(
        downPoint[0],
        downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
    },

    onMouseUp(e) {
        console.log("鼠標(biāo)抬起", e.offsetX, e.offsetY);
        //獲取坐標(biāo)
        let upPoint = [e.offsetX, e.offsetY];
        //重置鼠標(biāo)按下狀態(tài)
        this.down = false;
        //獲取指定區(qū)域的圖片數(shù)據(jù)
        let cutImgData = this.imgCtx.getImageData(
          this.downPoint[0],
          this.downPoint[1],
          upPoint[0] - this.downPoint[0],
          upPoint[1] - this.downPoint[1]
        );
        //獲取返回的圖片數(shù)據(jù)中的寬高
        let { width, height } = cutImgData;
        console.log(cutImgData);
        //創(chuàng)建一個(gè)用于放置圖片的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" />