手把手，带你用canvas做一个图像标注工具（一）大概半年前，项目中有一个需求，需要对图片进行拉框标注，当时搜索了一番，

完整项目地址：vue2-drawboard

NPM包地址：vue2-drawboard

项目Demo地址：drawboard-demo

前言

大概半年前，项目中有一个需求，需要对图片进行拉框标注，当时搜索了一番，没有找到特别合适的可以直接拿来使用的开源项目。最终只好亲自动手，基于canvas做了这个图片标注工具---vue2-drawboard。

由于当时急需这个工具，项目时间比较紧迫，所以整体的使用框架是vue2.x+elementui，尽可能地减少在UI组件上花的时间。

项目上的需求是对一张图片进行拉框标注，比如有一张汽车的图片，需要你在图片上标出汽车所在的位置，得到一系列的点坐标。基于此，关于图片编辑类的需求都可以通过此工具来完成。类似的功能还有画板，都是差不多的原理。

关键词

图像标注拉框标注画板工具 canvas vue

工具拆分

一个完整的图像标注工具大致可以分为三个部分：图像输入、图像标注、数据展示。第一次写图像标注工具的时候，我把这三个部分放在一起处理。但是后来在使用过程中发现图像输入和数据展示的需求千变万化，每次新来一个需求，都需要去修改一部分代码。反而图像标注的逻辑却是固定不变的。因此把这部分逻辑抽离出来，开发为一个组件并发布到npm上，然后在项目中引入即可。而图像输入和数据展示这两部分本身也并不难，根据需求再做开发。

项目Demo

以下视频中的是一个使用vue2-drawboard的演示项目。页面中从做到右分别是图像输入、图像标注、数据展示，图像标注用的就是vue2-drawboard。图像输入和数据展示是临时做的示例。

视频无法上传，请移步drawboard-demo观看

工具功能

图片编辑（折线、矩形、多边形）
图片放大/缩小
图片旋转
图片平移
图形点更新
图形整体拖动
配置化的绘制参数

使用方式

下载

npm install vue2-drawboard -S

引入

import DrawBoard from 'vue2-drawboard'
import 'vue2-drawboard/lib/drawboard.css'
 
Vue.use(DrawBoard);

使用

<template>
  <div id="app">
    <drawboard ref="myDrawboard" :url="url" @updateData="updateData"></drawboard>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
    }
  },
  methods:{
    updateData(data){
      console.log(data);
    },
    selectedFigure(index) {
      this.$refs.myDrawBoard.selectedFigure(index);
    }
  }
}
</script>

属性与方法

属性 | 属性 | 描述 | 默认值 |是否必须 | |------|------------|------------|------------| | url | 要展示的图片地址|""| 是 | | labelDataOrigin | 通过输入标注数据展示对应的图形| []|否| | loadingData | 是否显示图片加载动画| false|否
方法 | 属性 | 描述 | 参数 |是否必须 | |------|------------|------------|------------| | updateData | 获取标注的数据结果（点坐标）|图形信息| 是 |
组件上的方法 | 属性 | 描述 | 参数 | |------|------------|------------| | deleteFigure | 删除某个图形| 索引 | | selectedFigure | 选中某个图形|索引 |

目录结构

组件的目录结构如下所示：

DrawBoard              // drawborad文件夹
├── components         // 子组件
├── draw               // 绘制相关函数
├── styles             // 样式文件
├── utils              // 工具函数
└── main               // 组件核心内容

手把手，带你用canvas做一个图像标注工具（一）

前言

关键词

图像标注 拉框标注 画板工具 canvas vue