關於前端做圖片標注，或者視頻截圖之后在對圖片進行標注功能的實現。

第一次大坑，坑了一上午時間，在此記錄一下。

功能需求：在視頻通話過程中截取圖片，並對圖片進行標注（包括：1.矩形框 2.標注線 3.標注線清除）

插件：AILabel.js （文檔連接：https://dingyang9642.github.io/AILabel/#/）（自己本來也不知道這個js插件的，是公司大佬找到的，哈哈）

環境： Vue

插件引用： npm i ailabel

配置： import AILabel from 'ailabel' （在所需頁面引入就行了）

把我使用功能的代碼貼上來吧。

<template>
  <div class="wrapper">
    <div id="map"></div>
    <br>
    <br>
     <i-button id="drawRect" type="info" @click="setMode('drawRect')">矩形標注</i-button>
    <br>
    <br>
    <br>
    <i-button id="drawMask" type="info" @click="setMode('drawMask', '#FF0000', 5)">紅線</i-button>
    <br>
    <br>
    <br>
    <i-button id="clearMask" type="info" @click="setMode('clearMask')">檫除</i-button>
  </div>
</template>

<script>
import AILabel from 'ailabel'
export default {
  components: {},
  props: {},
  data () {
    return {
      gMaskLayer: '',
      Mode: 'pan',
      gFeatureLayer: '',
      gMap: '',
      mappingStyles: {
        drawRect: {
          drawStyle: { strokeColor: '#FF0000', opacity: 1, lineWeight: 1 },
          featureStyle: { strokeColor: '#00FF00', fillColor: '#0000FF', opacity: 0.3, lineWeight: 1 }
        },
        drawMask: {
          drawStyle: { strokeColor: '#FF0000', fillColor: '#0000FF', opacity: 1, lineWeight: 1 },
          featureStyle: {}
        },
        clearMask: {
          drawStyle: { lineWeight: 10 },
          featureStyle: {}
        }
      }
    }
  },
  watch: {
  },
  updated () {
  },
  computed: {},
  methods: {
    setMode (mode, color, size) {
      const preCurrentMode = mode.indexOf('drawMask') === 0 ? 'drawMask' : (mode.indexOf('Roi') !== -1 ? 'drawRoi' : mode)
      const currentMode = preCurrentMode.indexOf('drawPolyline') === 0 ? 'drawPolyline' : preCurrentMode
      const drawStyle = this.mappingStyles[currentMode].drawStyle
      if (color) {
        if (currentMode === 'drawPolyline') {
          drawStyle.strokeColor = color
        } else {
          drawStyle.fillColor = color
        }
      }
      if (size) {
        drawStyle.lineWeight = size
      }
      this.Mode = currentMode
      this.gMap && this.gMap.setMode(currentMode, new AILabel.Style(drawStyle)) // 設置當前模式（模式名，樣式）
      console.log(this.gMap.getMode())
    }
  },
  created () {},
  mounted () {
    this.gMap = new AILabel.Map('map', { zoom: 1080, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10 })
    this.gImageLayer = new AILabel.Layer.Image('img', require('../assets/1.jpg'), { w: 1080, h: 720 }, { zIndex: 1 })
    this.gMap.addLayer(this.gImageLayer)
    this.gFeatureLayer = new AILabel.Layer.Feature('featureLayer', { zIndex: 3, transparent: false })
    this.gMap.addLayer(this.gFeatureLayer)
    this.gMaskLayer = new AILabel.Layer.Mask('maskLayer', { zIndex: 2, opacity: 0.8 })
    this.gMap.addLayer(this.gMaskLayer)
    this.gMap.events.on('geometryDrawDone', (type, points) => {
      // 生成元素唯一標志（時間戳）
      const timestamp = new Date().getTime()
      const cMode = this.gMap.getMode()
      const featureStyle = this.mappingStyles[cMode].featureStyle
      // 元素添加展示
      if (type === 'rect') {
        const fea = new AILabel.Feature.Rect(`feature-${timestamp}`, points, {
          name: '中國'
        }, featureStyle, { activeColor: '#000', cross: true })
        this.gFeatureLayer.addFeature(fea)
      } else if (type === 'mask') {
        // 包含繪制&塗抹事件
        const maskAction = points
        console.log('--maskAction--', maskAction)
        maskAction.name = '標簽A'
        this.gMaskLayer.addMaskAction(maskAction)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
 #map {
  width: 500px;
  height: 400px;
  border: 1px solid red;
  position: relative;
  cursor: pointer;
}
</style>

由於需求不是太多，只使用到了三個功能。很多東西還沒涉及到，需要精通的小伙伴請到文檔中學習。(AILable官方QQ群：378301400；本人QQ:396172594)下面貼上截圖：