vue实现图像标注

Vue 实现图像标注的方法

使用 HTML5 Canvas 实现基础标注

安装依赖（如需要）：

npm install vue-drawing-canvas

基础代码示例：

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      this.lastX = e.clientX - rect.left
      this.lastY = e.clientY - rect.top
    },
    draw(e) {
      if (!this.isDrawing) return
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const currentX = e.clientX - rect.left
      const currentY = e.clientY - rect.top

      ctx.beginPath()
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(currentX, currentY)
      ctx.stroke()

      this.lastX = currentX
      this.lastY = currentY
    },
    stopDrawing() {
      this.isDrawing = false
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    canvas.width = 800
    canvas.height = 600
  }
}
</script>

使用第三方库实现高级功能

推荐库：

• vue-annotator：提供矩形、圆形、多边形等标注工具
• fabric.js：功能强大的Canvas库，支持对象操作

fabric.js 示例：

<template>
  <canvas id="canvas" width="800" height="600"></canvas>
</template>

<script>
import { fabric } from 'fabric'

export default {
  mounted() {
    const canvas = new fabric.Canvas('canvas')
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 50,
      height: 50,
      fill: 'transparent',
      stroke: 'red',
      strokeWidth: 2
    })
    canvas.add(rect)
  }
}
</script>

实现标注保存与加载

保存标注数据：

saveAnnotations() {
  const canvas = this.$refs.canvas
  const dataURL = canvas.toDataURL('image/png')
  localStorage.setItem('annotatedImage', dataURL)
}

加载标注数据：

loadAnnotations() {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.src = localStorage.getItem('annotatedImage')
  img.onload = () => {
    ctx.drawImage(img, 0, 0)
  }
}

添加标注类型选择

<template>
  <div>
    <select v-model="annotationType">
      <option value="rectangle">矩形</option>
      <option value="circle">圆形</option>
      <option value="line">直线</option>
    </select>
    <canvas ref="canvas" @click="addAnnotation"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      annotationType: 'rectangle'
    }
  },
  methods: {
    addAnnotation(e) {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

      if (this.annotationType === 'rectangle') {
        ctx.strokeRect(x, y, 100, 50)
      } else if (this.annotationType === 'circle') {
        ctx.beginPath()
        ctx.arc(x, y, 30, 0, Math.PI * 2)
        ctx.stroke()
      }
    }
  }
}
</script>

实现标注文本功能

addTextAnnotation(e) {
  const text = prompt('输入标注文本:')
  if (text) {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    ctx.font = '16px Arial'
    ctx.fillText(text, x, y)
  }
}

以上方法可以根据具体需求组合使用，构建完整的图像标注功能。对于更复杂的应用场景，建议使用专门的标注库如labelImg或annotorious的Vue封装版本。