vue canvas 方法无效_vue实现手机app手写签名功能

我曾经在一个文书交互相关的项目中遇到过这样的一个需求，当用户接收到管理员发送的文书时，用户需要在这个文书上签字签收，签名需要跟原有的文书进行合并，做到模仿线下真实签收的电子签名。这签收没有调用APP特有的功能，而是直接使用H5的canvas画布完成。

本文只介绍canvas实现你在手机上进行书写(签名)，文书与签名的合并是由Java后端完成。接口比较复杂这里不进行介绍接口，我会在后面的文章中进入介绍，请关注文章的更新。

以下代码有做一些删减，删减的原因一来是涉及到业务不便公开，二来是跟签名无关的代码留在里面，容易误导你们。

我在这里简单介绍一下，先定义一个canvas标签，设置他的ID，初始宽度和高度，然后在增加canvas对应的JS初始化函数，这些函数基本可以直接复制到你们的工程里，然后进行测试调整。主要的功能就是清除和保存。当你的页面初始化后，就会出现一个白然的画布，如果你在Web页面做测试 的话，你可以使用鼠标进入绘画(因为我这个功能是为某个公众号里的业务做的开发，因此我都是用微信开发者工具进行测试的)，也可以放到手机上进入手写测试(手机要支持触摸功能，不要拿老人机进入测试)。

大概透入一下保存功能，当你点击保存时，会向接口发送一张图片二进制流，你只要做文件读写，保存到本地为图片格式即可，图片出来的就是你的签名。至于我前面提到的文书签名功能，是把文书Doc转成图片，然后把文书图片跟签名图片进行合并成一张图片。这样就变成了文书电子签名，因为文书是用户上传的，文书有大有小，你要图片合成，就必须要定位坐标，如何利用简单的算法进入签名定位，这就涉及我下面删除的一些前端逻辑和后端的接口了。有兴趣的可以关注我后面的介绍。

虽然我这里用的是vue写法，但并不复杂，直接把div对应的静态代码复制出去，把canvas对应的JS自定义声明函数复制到JS中，把mounted函数里的方法放在JS自动加载中即可。

老样子，我先截图(我博客截图的会看起来更清楚点)，源码在图后面，

源码

电子签名

Canvas画板

清除

保存