Hand in hand, take you to make an image annotation tool with Canvas (I)

Complete project address: vue2- Drawboard

NPM package address: vue2-drawboard

Project Demo address: drawboard-demo

preface

About half a year ago, there was a requirement for drawing and labeling images in the project. I did some searching but couldn’t find a particularly suitable open source project that could be used directly. Finally, I had to make this picture annotation tool –vue2- DrawBoard based on Canvas.

Since the tool was needed and the project was time constrained, the overall framework was vue2. X + elementUi to minimize the time spent on UI components.

The requirement of the project is to mark a picture with a pull box, for example, a picture of a car. You need to mark the position of the car on the picture to get a series of point coordinates. Based on this, the needs of the image editing class can be completed through this tool. Similar function and drawing board, same principle.

keywords

Canvas Vue is a drawing board tool for drawing frames

Tool split

A complete image annotation tool can be roughly divided into three parts: image input, image annotation, data display. When I first wrote the image annotation tool, I put all three parts together. However, later in the process of use, I found that the requirements of image input and data display were ever-changing. Every time a new requirement was introduced, part of the code needed to be modified. On the contrary, the logic of image labeling is fixed. So isolate that logic, develop it as a component, publish it to NPM, and introduce it into your project. And the image input and data display of these two parts itself is not difficult, according to the needs of development.

The Demo project

The following video is a demonstration project using the VUe2 -drawboard. In the page, from the right to the right are image input, image annotation and data display respectively. The image annotation uses vuE2-drawBoard. Image input and data presentation are examples of improvisation.

Video cannot be uploaded, please movedrawboard-demowatch

Tool function

• Image editing (polyline, rectangle, polygon)
• Image enlargement/reduction
• Image rotation
• Image translation
• Graphic point update
• Overall drag of graphics
• Configured drawing parameters

use

• download

npm install vue2-drawboard -S
Copy the code

• The introduction of

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

• use

<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>
Copy the code

Properties and Methods

• attribute

• methods

• Methods on the component

The directory structure

The directory structure of the component is as follows:

├─ exercises, ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises Component Core contentCopy the code

Of the pit

• Hand in hand, take you to make an image annotation tool with Canvas (I)
• Hand in hand, take you to make an image annotation tool with Canvas (II)