Vue如何用Canvas绘制图片、矩形、线条、文字并实现下载功能？

本文共计832个文字，预计阅读时间需要4分钟。

1. 前言

1.1 业务场景

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

1.2 实现方法

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

1 前言

1.1 业务场景

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

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

2 实现原理

2.1 绘制画布

<el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas" width="940" height="570"></canvas> </el-dialog>

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

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