直播平台源码，vue图片中划框截取部分图片

<template><br>  <div><br>    <el-dialog title="请在图片上画出需要新增故障的位置" :visible.sync="dialogVisible" width="1270px" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false"><br>      <div><br>        <img id="newImg" ref="newImg" style="user-select:none;" crossOrigin="Anonymous" :src="ftp+info.detectionImgLocation" width="1200" height="700" /><br>        <canvas ref="myCanvas" class="myCanvas" width="1200" height="700"></canvas><br>      </div><br>      <!-- loading层，在上一层进行loading会导致canvas偏移的情况 --><br>      <div v-if="loading" v-loading="loading" class="loading_c" element-loading-text="截图中...."></div><br>    </el-dialog><br>  </div><br></template><br><script><br>//import html2canvas from "html2canvas";<br>export default {<br>  props: ['info'],<br>  data() {<br>    return {<br>      dialogVisible: true,<br>      ftp: process.env.VUE_APP_FTP_API,<br>      originalImg: {<br>        width: 0,<br>        height: 0<br>      },<br>      canvas: "",<br>      mousedownPostion: {<br>        x: 0,<br>        y: 0<br>      },<br>      finallyRect: {<br>        x: "",<br>        y: "",<br>        width: 0,<br>        height: 0<br>      },<br>      isDrawing: false,//是否开启绘制<br>      loading: true<br>    }<br>  },<br>  mounted() {<br>    this.$nextTick(() => {<br>      this.getImgWidth()<br>    })<br>  },<br>  methods: {<br>    //关闭弹窗<br>    handleClose() {<br>      this.$emit('closeAdd');<br>    },<br>    //画布监听<br>    getImgWidth() {<br>      const myCanvas = this.$refs.myCanvas<br>      const img = new Image()<br>      img.src = this.ftp + this.info.detectionImgLocation<br>      img.onload = () => { //获取图片原始的长宽<br>        this.originalImg.width = img.width<br>        this.originalImg.height = img.height<br>        this.loading = false<br>      }<br>      myCanvas.onmousedown = this.mouseDown<br>      // myCanvas.onmousemove = this.mouseMove<br>      myCanvas.onmouseup = this.mouseUp;<br>      myCanvas.onmouseout = this.mouseOut;<br>      this.canvas = myCanvas<br>    },<br>    //鼠标按下<br>    mouseDown(e) {<br>      this.mousedownPostion.x = e.offsetX<br>      this.mousedownPostion.y = e.offsetY<br>      this.isDrawing = true<br>      this.canvas.onmousemove = this.mouseMove<br>    },<br>    //鼠标移动<br>    mouseMove(e) {<br>      if (!this.isDrawing) return false<br>      let rectWidth = 0<br>      let rectHeight = 0;<br>      rectWidth = Math.abs(this.mousedownPostion.x - e.offsetX)<br>      rectHeight = Math.abs(this.mousedownPostion.y - e.offsetY)<br>      if (this.mousedownPostion.x - e.offsetX > 0 || this.mousedownPostion.y - e.offsetY > 0) {<br>        //从右下往左上画<br>        this.drawReat(e.offsetX, e.offsetY, rectWidth, rectHeight)<br>      } else {<br>        this.drawReat(this.mousedownPostion.x, this.mousedownPostion.y, rectWidth, rectHeight)<br>      }<br>    },<br>    //鼠标抬起<br>    mouseUp(e) {<br>      if (!this.isDrawing) return false;<br>      this.isDrawing = false<br>      this.loading = true<br>      this.canvas.onmousemove = function () { }<br>      this.shareHandle()<br>    },<br>    //超出canvas<br>    mouseOut(e) {<br>      if (!this.isDrawing) return false;<br>      this.isDrawing = false<br>      this.loading = true<br>      this.canvas.onmousemove = function () { }<br>      this.shareHandle()<br>    },<br>    //绘制矩形<br>    drawReat(x, y, width, height) {<br>      this.finallyRect = {<br>        x: x,<br>        y: y,<br>        width: width,<br>        height: height<br>      }<br>      const context = this.canvas.getContext("2d")<br>      context.clearRect(0, 0, 1200, 700)<br>      context.save() //状态的保存<br>      context.beginPath()<br>      context.strokeStyle = '#fff'<br>      context.lineWidth = 2<br>      context.strokeRect(x, y, width, height)<br>      context.restore() //状态的恢复<br>    },<br>    // 截图<br>    async shareHandle() {<br>      if (this.finallyRect.width <= 0 || this.finallyRect.height <= 0) {<br>        this.loading = false<br>        return false<br>      }<br>      //html2canvas截图,速度太慢改为原生截图<br>      // 使用截取指定范围元素<br>      // const opts = {<br>      //   useCORS: true,<br>      //   ...this.finallyRect<br>      // };<br>      // const canvas = await html2canvas(this.$refs.newImg, opts);<br>      // const screenshotImage = canvas.toDataURL("image/jpg");<br>      // // 图片在这里进行传输<br>      // const scalX = this.originalImg.width / 1200<br>      // const scalY = this.originalImg.height / 700<br>      // this.finallyRect = {<br>      //   x: this.finallyRect.x * scalX,<br>      //   y: this.finallyRect.y * scalY,<br>      //   width: this.finallyRect.width * scalX,<br>      //   height: this.finallyRect.height * scalY<br>      // }<br>      // this.loading = false<br>      // this.$emit('screenshotImage', {<br>      //   image: screenshotImage,<br>      //   ...this.finallyRect,<br>      //   picInfo: this.info<br>      // });<br>      //缩放比例<br>      const scalX = this.originalImg.width / 1200<br>      const scalY = this.originalImg.height / 700<br>      this.finallyRect = {<br>        x: this.finallyRect.x * scalX,<br>        y: this.finallyRect.y * scalY,<br>        width: this.finallyRect.width * scalX,<br>        height: this.finallyRect.height * scalY<br>      }<br>      // 创建一个新的canvas<br>      const canvasElement = document.createElement("canvas");<br>      const canvasContext = canvasElement.getContext("2d");<br>      const { x, y, width, height } = this.finallyRect<br>      canvasElement.width = width;<br>      canvasElement.height = height;<br>      // 框选区域绘制到canvas里<br>      canvasContext.drawImage(document.getElementById('newImg'),<br>        x, y, width, height,<br>        0, 0, width, height);<br>      // 转为base64进行显示<br>      const screenshotImage = canvasElement.toDataURL("image/jpeg");<br>      this.loading = false<br>      this.$emit('screenshotImage', {<br>        image: screenshotImage,<br>        ...this.finallyRect,<br>        picInfo: this.info<br>      });<br>    },<br>  },<br>}<br></script><br><style scoped><br>.doCanvas {<br>  position: absolute;<br>  left: 0;<br>  top: 13px;<br>  z-index: 50;<br>}<br>::v-deep .el-dialog {<br>  margin-top: 8vh !important;<br>}<br>::v-deep .el-dialog__body {<br>  position: relative;<br>}<br>.myCanvas {<br>  position: absolute;<br>  left: 20px;<br>  user-select: none;<br>}<br>.loading_c {<br>  width: 1200px;<br>  height: 700px;<br>  top: 30px;<br>  position: absolute;<br>}<br></style>