方案背景
需求
需要对图片进行标注,导出图片。
需要标注N多图片最后同时保存。
需要根据多边形区域数据(区域、颜色、名称)标注。
对应方案
用canvas实现涂鸦、圆形、矩形的绘制,最终生成图片base64编码用于上传
大量图片批量上传很耗时间,为了提高用户体验,改为只实现圆形、矩形绘制,最终保存成坐标,下次显示时根据坐标再绘制。
多边形区域的显示是根据坐标点绘制,名称显示的位置为多边形质心。
代码
<template>
<div>
<canvas
:id="radom"
:class="{canDraw: 'canvas'}"
:width="width"
:height="height"
:style="{'width':`${width}px`,'height':`${height}px`}"
@mousedown="canvasDown($event)"
@mouseup="canvasUp($event)"
@mousemove="canvasMove($event)"
@touchstart="canvasDown($event)"
@touchend="canvasUp($event)"
@touchmove="canvasMove($event)">
</canvas>
</div>
</template>
<script>
// import proxy from './proxy.js'
const uuid = require('node-uuid')
export default {
props: {
canDraw: { // 图片路径
type: Boolean,
default: true
},
url: { // 图片路径
type: String
},
info: { // 位置点信息
type: Array
},
width: { // 绘图区域宽度
type: String
},
height: { // 绘图区域高度
type: String
},
lineColor: { // 画笔颜色
type: String,
default: 'red'
},
lineWidth: { // 画笔宽度
type: Number,
default: 2
},
lineType: { // 画笔类型
type: String,
default: 'circle'
}
},
watch: {
info (val) {
if (val) {
this.initDraw()</