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

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

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

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

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

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

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

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

vue canvas 方法无效_vue实现手机app手写签名功能_第1张图片
vue canvas 方法无效_vue实现手机app手写签名功能_第2张图片
vue canvas 方法无效_vue实现手机app手写签名功能_第3张图片
vue canvas 方法无效_vue实现手机app手写签名功能_第4张图片
vue canvas 方法无效_vue实现手机app手写签名功能_第5张图片
vue canvas 方法无效_vue实现手机app手写签名功能_第6张图片

源码

电子签名
Canvas画板
清除
保存

你可能感兴趣的