直播平臺原始碼，vue圖片中劃框擷取部分圖片

直播平臺原始碼，vue圖片中劃框擷取部分圖片

<template>
  <div>
    <el-dialog title="請在圖片上畫出需要新增故障的位置" :visible.sync="dialogVisible" width="1270px" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <img id="newImg" ref="newImg" style="user-select:none;" crossOrigin="Anonymous" :src="ftp+info.detectionImgLocation" width="1200" height="700" />
        <canvas ref="myCanvas" class="myCanvas" width="1200" height="700"></canvas>
      </div>
      <!-- loading層，在上一層進行loading會導致canvas偏移的情況 -->
      <div v-if="loading" v-loading="loading" class="loading_c" element-loading-text="截圖中...."></div>
    </el-dialog>
  </div>
</template>
<script>
//import html2canvas from "html2canvas";
export default {
  props: ['info'],
  data() {
    return {
      dialogVisible: true,
      ftp: process.env.VUE_APP_FTP_API,
      originalImg: {
        width: 0,
        height: 0
      },
      canvas: "",
      mousedownPostion: {
        x: 0,
        y: 0
      },
      finallyRect: {
        x: "",
        y: "",
        width: 0,
        height: 0
      },
      isDrawing: false,//是否開啟繪製
      loading: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getImgWidth()
    })
  },
  methods: {
    //關閉彈窗
    handleClose() {
      this.$emit('closeAdd');
    },
    //畫布監聽
    getImgWidth() {
      const myCanvas = this.$refs.myCanvas
      const img = new Image()
      img.src = this.ftp + this.info.detectionImgLocation
      img.onload = () => { //獲取圖片原始的長寬
        this.originalImg.width = img.width
        this.originalImg.height = img.height
        this.loading = false
      }
      myCanvas.onmousedown = this.mouseDown
      // myCanvas.onmousemove = this.mouseMove
      myCanvas.onmouseup = this.mouseUp;
      myCanvas.onmouseout = this.mouseOut;
      this.canvas = myCanvas
    },
    //滑鼠按下
    mouseDown(e) {
      this.mousedownPostion.x = e.offsetX
      this.mousedownPostion.y = e.offsetY
      this.isDrawing = true
      this.canvas.onmousemove = this.mouseMove
    },
    //滑鼠移動
    mouseMove(e) {
      if (!this.isDrawing) return false
      let rectWidth = 0
      let rectHeight = 0;
      rectWidth = Math.abs(this.mousedownPostion.x - e.offsetX)
      rectHeight = Math.abs(this.mousedownPostion.y - e.offsetY)
      if (this.mousedownPostion.x - e.offsetX > 0 || this.mousedownPostion.y - e.offsetY > 0) {
        //從右下往左上畫
        this.drawReat(e.offsetX, e.offsetY, rectWidth, rectHeight)
      } else {
        this.drawReat(this.mousedownPostion.x, this.mousedownPostion.y, rectWidth, rectHeight)
      }
    },
    //滑鼠抬起
    mouseUp(e) {
      if (!this.isDrawing) return false;
      this.isDrawing = false
      this.loading = true
      this.canvas.onmousemove = function () { }
      this.shareHandle()
    },
    //超出canvas
    mouseOut(e) {
      if (!this.isDrawing) return false;
      this.isDrawing = false
      this.loading = true
      this.canvas.onmousemove = function () { }
      this.shareHandle()
    },
    //繪製矩形
    drawReat(x, y, width, height) {
      this.finallyRect = {
        x: x,
        y: y,
        width: width,
        height: height
      }
      const context = this.canvas.getContext("2d")
      context.clearRect(0, 0, 1200, 700)
      context.save() //狀態的儲存
      context.beginPath()
      context.strokeStyle = '#fff'
      context.lineWidth = 2
      context.strokeRect(x, y, width, height)
      context.restore() //狀態的恢復
    },
    // 截圖
    async shareHandle() {
      if (this.finallyRect.width <= 0 || this.finallyRect.height <= 0) {
        this.loading = false
        return false
      }
      //html2canvas截圖,速度太慢改為原生截圖
      // 使用擷取指定範圍元素
      // const opts = {
      //   useCORS: true,
      //   ...this.finallyRect
      // };
      // const canvas = await html2canvas(this.$refs.newImg, opts);
      // const screenshotImage = canvas.toDataURL("image/jpg");
      // // 圖片在這裡進行傳輸
      // const scalX = this.originalImg.width / 1200
      // const scalY = this.originalImg.height / 700
      // this.finallyRect = {
      //   x: this.finallyRect.x * scalX,
      //   y: this.finallyRect.y * scalY,
      //   width: this.finallyRect.width * scalX,
      //   height: this.finallyRect.height * scalY
      // }
      // this.loading = false
      // this.$emit('screenshotImage', {
      //   image: screenshotImage,
      //   ...this.finallyRect,
      //   picInfo: this.info
      // });
      //縮放比例
      const scalX = this.originalImg.width / 1200
      const scalY = this.originalImg.height / 700
      this.finallyRect = {
        x: this.finallyRect.x * scalX,
        y: this.finallyRect.y * scalY,
        width: this.finallyRect.width * scalX,
        height: this.finallyRect.height * scalY
      }
      // 建立一個新的canvas
      const canvasElement = document.createElement("canvas");
      const canvasContext = canvasElement.getContext("2d");
      const { x, y, width, height } = this.finallyRect
      canvasElement.width = width;
      canvasElement.height = height;
      // 框選區域繪製到canvas裡
      canvasContext.drawImage(document.getElementById('newImg'),
        x, y, width, height,
        0, 0, width, height);
      // 轉為base64進行顯示
      const screenshotImage = canvasElement.toDataURL("image/jpeg");
      this.loading = false
      this.$emit('screenshotImage', {
        image: screenshotImage,
        ...this.finallyRect,
        picInfo: this.info
      });
    },
  },
}
</script>
<style scoped>
.doCanvas {
  position: absolute;
  left: 0;
  top: 13px;
  z-index: 50;
}
::v-deep .el-dialog {
  margin-top: 8vh !important;
}
::v-deep .el-dialog__body {
  position: relative;
}
.myCanvas {
  position: absolute;
  left: 20px;
  user-select: none;
}
.loading_c {
  width: 1200px;
  height: 700px;
  top: 30px;
  position: absolute;
}
</style>

以上就是 直播平臺原始碼，vue圖片中劃框擷取部分圖片，更多內容歡迎關注之後的文章