Vue2，实现电子签名（web、移动端）功能
一、简述
现如今，电子签名与手写签名一样具有法律效应。越来越多的项目开发中会有电子签名的需求，自己最近的项目也会频繁出现该需求。一般开发时会用到现有的npm依赖包vue-signature-pad，但是自己所处的开发环境不能连接外网，所以打算自己研究和总结实现电子签名功能。
实现电子签名功能，需要用到html5中一个重要级别的辅助标签——canvas。
二、canvas介绍
什么是canvas？
HTML5的
它的图形绘制，通常是使用javascript来完成的，可以通过多种方法来绘制路径、盒、圆、字符以及添加图像等。
如何实现canvas
- 创建canvas元素
- 获取canvas元素
- 创建context对象
Vue2（2.6.11）
canvas给我们提供了很多的Api，供我们使用。
getContext('2d')对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符、以及添加图像的方法。
在这里需要先添加两个按钮，分别是取消和保存，后续会用到。
三、签名实现
实现步骤：
- 配置基础内容
- 获取canvas实例
- 基础内容设置
- 设备兼容 - 绑定事件
- 开始绘制
- 绘制
- 结束绘制
- 取消功能/清空画布
- 保存功能 - 图片显示、本地下载、上传后端存储
1.配置基础内容
- 定义宽、高、线条颜色、线条宽度等基础内容；
2.获取canvas实例
3.基础内容设置
- 设置canvas的宽、高等基础配置；
- 注意：这里需要注意的是，canvas的默认宽高是 width: 300 height: 150，若是style设置width和height，可能会出现拉伸问题。所以尽量使用canvas内置属性设置width和height，不然会有bug。
4.设备兼容 - 绑定事件
- 定义计算属性，判断是否为移动端；
- 监听canvas 鼠标/手势按下 和 鼠标/手势 弹起/离开 事件；
5.开始绘制
- 鼠标/手势按下后，获取偏移量及坐标并存储；
- 清除以上一次 beginPath 之后的所有路径，进行绘制；
- moveTo设置画线起始点位；
- 监听 鼠标移动或手势移动；
6.绘制
- 获取当前坐标点位；
- lineTo根据坐标点位移动添加线条；
- stroke绘制；
- 记录坐标；
7.结束绘制
- closePath结束绘制；
- 移除 鼠标移动或手势移动 监听器；
8.取消功能/清空画布
- 绑定 取消功能/清空画布 事件；
- 清空当前画布上的所有绘制内容；
- 清空坐标；
9.保存功能 - 图片显示、本地下载、上传后端存储
保存功能做了三个项目业务场景常用的方法，供大家参考或使用
图片显示：将签名转成base64，并放在img路径上，进行签名的图片展示；
本地下载：将签名转成blob流，并下载至本地（默认png格式图片）；
上传后端存储：将签名转成base64，然后将base64转成File文件对象，再上传后端；
基础保存设置
- 绑定保存事件；
- 签名判空；
- 操作事件；
显示图片
- 创建img标签，并绑定路径；
- 定义操作事件；
- 将canvas内容转成base64，并赋值img绑定路径；
...
本地下载
- 定义操作事件；
- 将canvas内容转成blob流；
- 通过a标签进行下载；
上传后端存储
- 将canvas内容转成base64，自定义文件名；
- 将base64转成File文件对象；
- 上传签名；