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 {
clearInterval(