canvas路线图 vue_Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

1 前言

1.1 业务场景

图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。

由于浏览器的机制，使用 window.location.href 下载图片时，并不会保存到本地，会在浏览器打开。

2 实现原理

2.1 绘制画布

title="查看图片"

:visible.sync="dialogJPG"

append-to-body>

这里为了交互体验，使用了 element-ui 的弹窗方式。将canvas画布放到了弹窗中。

为了突出画布效果可以在css中设置一个边框。

#mycanvas {

border: 1px solid rgb(199, 198, 198);

}

2.2 绘制图片

// imageUrl为后台提供图片地址

doDraw(imageUrl){

// 获取canvas

var canvas = document.getElementById("mycanvas")

// 由于弹窗，确保已获取到

var a = setInterval(() =>{

// 重复获取

canvas = document.getElementById("mycanvas")

if(!canvas){

return false

} else {

clearInter