当前位置：首页 > VUE

vue实现图片标注

2026-01-19 17:07:22VUE

Vue 实现图片标注功能

实现图片标注功能通常需要结合 Canvas 或 SVG 技术，以下是一个基于 Vue 的实现方案：

基础实现思路

安装依赖（如需要）

npm install fabric --save  # 使用fabric.js库简化Canvas操作

组件基础结构

vue实现图片标注

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
    <button @click="clearCanvas">清除</button>
  </div>
</template>

<script>
import { fabric } from 'fabric'

export default {
  data() {
    return {
      canvas: null,
      isDrawing: false,
      startX: 0,
      startY: 0
    }
  }
}
</script>

核心功能实现

初始化Canvas

mounted() {
  this.canvas = new fabric.Canvas(this.$refs.canvas, {
    isDrawingMode: false,
    width: 800,
    height: 600,
    backgroundColor: '#f5f5f5'
  })
}

绘制矩形标注

vue实现图片标注

methods: {
  startDrawing(e) {
    const pointer = this.canvas.getPointer(e.e)
    this.isDrawing = true
    this.startX = pointer.x
    this.startY = pointer.y

    this.rect = new fabric.Rect({
      left: this.startX,
      top: this.startY,
      width: 0,
      height: 0,
      fill: 'rgba(255,0,0,0.3)',
      stroke: 'red',
      strokeWidth: 2
    })
    this.canvas.add(this.rect)
  },

  draw(e) {
    if (!this.isDrawing) return
    const pointer = this.canvas.getPointer(e.e)

    this.rect.set({
      width: pointer.x - this.startX,
      height: pointer.y - this.startY
    })
    this.canvas.renderAll()
  },

  stopDrawing() {
    this.isDrawing = false
  }
}

进阶功能扩展

添加文本标注

addText() {
  const text = new fabric.Text('标注内容', {
    left: 100,
    top: 100,
    fill: 'blue',
    fontSize: 20
  })
  this.canvas.add(text)
}

保存标注结果

saveAnnotation() {
  const dataURL = this.canvas.toDataURL({
    format: 'png',
    quality: 1
  })
  // 可以保存到服务器或本地
  console.log(dataURL)
}

响应式处理

适应图片尺寸

loadImage(imgUrl) {
  fabric.Image.fromURL(imgUrl, (img) => {
    this.canvas.setWidth(img.width)
    this.canvas.setHeight(img.height)
    this.canvas.setBackgroundImage(img, () => {
      this.canvas.renderAll()
    })
  })
}