[FE]进出记录详情页面添加识别方框

security-protection-platform/src/modules/access/index.vue

@@ -82,8 +82,9 @@ s<template>
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%">
              <!-- <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%"> -->
              <!--处理图片里的方框-->
              <img :src="mainimage" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
@@ -185,7 +186,9 @@ export default {
      // }
      // 截取后的图片
      newimage: ''
      newimage: '',
      // 详情的主图片
      mainimage: ''
    }
  },
@@ -215,6 +218,8 @@ export default {
      // this.rowdata = scope.row
      // console.log(this.rowdata)
      // console.log('id是', scope.row.aiIdenLogId)
      this.newimage = ''
      this.mainimage = ''
      var res = await accessapi.getOneInAndOutRecord({ params: { aiIdenLogId: scope.row.aiIdenLogId } })
      if (res.data.success) {
@@ -226,6 +231,7 @@ export default {
        // this.rowdata.alarmInfo.newImg = this.rowdata.pictureInfo.fileUrl
        this.getImage()
        this.getmainimage()
        // var loadTimer
        // var imgObject = new Image()
        // imgObject.setAttribute('crossOrigin', 'anonymous')
@@ -360,6 +366,7 @@ export default {
        return true
      }
    },
    // 处理截图图片
    async getImage () {
      var loadTimer
      var imgObject = new Image()
@@ -392,6 +399,50 @@ export default {
        // console.log(tnCanvas.toDataURL())
        return tnCanvas.toDataURL()
      }
    },
    // 处理主图片
    async getmainimage () {
      var that = this
      var x = this.rowdata.alarmInfo.face_box[0]
      var y = this.rowdata.alarmInfo.face_box[1]
      var width = this.rowdata.alarmInfo.face_box[2] - this.rowdata.alarmInfo.face_box[0]
      var height = this.rowdata.alarmInfo.face_box[3] - this.rowdata.alarmInfo.face_box[1]
      function getBase64Image (img) {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + width, y)
        ctx.lineTo(x + width, y + height)
        ctx.lineTo(x, y + height)
        ctx.lineTo(x, y) // 绘制最后一笔使图像闭合
        ctx.lineWidth = 5
        ctx.strokeStyle = 'red'
        ctx.stroke()
        var dataURL = canvas.toDataURL('image/png') // 可选其他值 image/jpeg
        return dataURL
      }
      function main (src, cb) {
        var image = new Image()
        image.src = src + '?v=' + Math.random() // 处理缓存
        image.crossOrigin = '*' // 支持跨域图片
        image.onload = function () {
          var base64 = getBase64Image(image)
          cb && cb(base64)
        }
      }
      main(this.rowdata.pictureInfo.fileUrl, function (base64) {
        // console.log(base64, '是否成功打印base64')
        that.mainimage = base64
      })
    }
  }