关于前端做图片标注，或者视频截图之后在对图片进行标注功能的实现。

第一次大坑，坑了一上午时间，在此记录一下。

功能需求：在视频通话过程中截取图片，并对图片进行标注（包括：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)下面贴上截图：

标签：截图,drawStyle,标注,featureStyle,gMap,new,const,AILabel,图片
来源： https://www.cnblogs.com/budingbuding/p/13298500.html