vue组件canvas实现图⽚涂鸦
效果图
⽅案背景
需求
1 需要对图⽚进⾏标注，导出图⽚。
2 需要标注N多图⽚最后同时保存。
3 需要根据多边形区域数据（区域、颜⾊、名称）标注。
对应⽅案
1 ⽤canvas实现涂鸦、圆形、矩形的绘制，最终⽣成图⽚ba64编码⽤于上传
2 ⼤量图⽚批量上传很耗时间，为了提⾼⽤户体验，改为只实现圆形、矩形绘制，最终保存成坐标，下次显⽰时根据坐标再绘制。
3 多边形区域的显⽰是根据坐标点绘制，名称显⽰的位置为多边形质⼼。
代码
<template>
<!-- canvas图⽚区域选择画布 -->
<div>
<canvas
:id="radom"
:class="{canDraw: 'canvas'}"
:width="width"
:height="height"
:
@moudown="canvasDown($event)"
@mouup="canvasUp($event)"
@moumove="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,
default:'/img/quyu_bg.jpg'
},
info: { // 位置点信息
type: Array
},
width: { // 绘图区域宽度
type: String,
default:'600'
},
height: { // 绘图区域⾼度
type: String,
default:'400'
},
lineColor: { // 画笔颜⾊
type: String,
default: 'red'
},
lineWidth: { // 画笔宽度
type: Number,
default: 2
},
lineType: { // 画笔类型
type: String,
default: 'rec'
}
},
watch: {
info (val) {
console.log(val)
if (val) {
this.initDraw()
}
}
},
data () {
return {
// 同⼀页⾯多次渲染时，⽤于区分元素的id radom: 'canvas1',
// canvas对象
context: {},
// 是否处于绘制状态
canvasMoveU: fal,
// 绘制矩形和椭圆时⽤来保存起始点信息
beginRec: {
x: '',
y: '',
imageData: ''
},
// 储存坐标信息
drawInfo: [],
// 背景图⽚缓存
img: new Image()
}
},
mounted () {
this.initDraw()
},
methods: {
// 初始化绘制信息
initDraw () {
// 初始化画布
const canvas = ElementById(this.radom) t = Context('2d')
// 初始化背景图⽚
this.img.tAttribute('crossOrigin', 'Anonymous')
this.img.src = '/img/quyu_bg.jpg'
r = () => {
var timeStamp = +new Date()
this.img.src = this.url + '?' + timeStamp
}
load = () => {
this.clean()
}
// Ba64({imgUrl: this.url}).then((res) => {
// if (de * 1 === 0) {
// this.img.src = 'data:image/jpeg;ba64,'+res.data
// load = () => {
// this.clean()
// }
// }
/
/ })
// 初始化画笔
},
// ⿏标按下
canvasDown (e) {
//清空画布
this.clean()
if (this.canDraw) {
this.canvasMoveU = true
/
/ client是基于整个页⾯的坐标,layer是基于画布坐标,offt是cavas距离pictureDetail顶部以及左边的距离 const canvasX = e.layerX - e.target.parentNode.offtLeft
const canvasY = e.layerY - e.target.parentNode.offtTop
// 记录起始点和起始状态
this.beginRec.x = canvasX
this.beginRec.y = canvasY
this.beginRec.imageData = ImageData(0, 0, this.width, this.height)
// 存储本次绘制坐标信息
