基于WEB的原笔迹手写输入方法、设备及终端的制作技术

图片简介:

本技术涉及一种基于WEB的原笔迹手写输入方法、装置及终端。该方法包括：接收来自用户通过触发WEB浏览器而产生的启动签名命令；根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；将所述图片发送至服务端存储。用户可以脱离硬件限制，只需通过浏览器，即可做到随时随地签名批注。

技术要求

1.一种基于WEB的原笔迹手写输入方法，其特征在于，包括以下步骤：

接收来自用户通过触发WEB浏览器而产生的启动签名命令；

根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

将所述图片发送至服务端存储。

2.如权利要求1所述的原笔迹手写输入方法，其特征在于，还包括以下步骤：当判断WEB 浏览器支持签名画板功能时，在所述WEB浏览器上显示所述签名画板。

3.如权利要求1所述的原笔迹手写输入方法，其特征在于，所述签名画板为基于canvas标签的签名画板。

4.如权利要求1所述的原笔迹手写输入方法，其特征在于，当所述WEB浏览器的类型为移动终端浏览器时，注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，注册鼠标移动事件。

5.如权利要求1所述的原笔迹手写输入方法，其特征在于，将所述图片发送至服务端存储的步骤具体为：将所述图片转换为字节流，将所述字节流通过HTTP协议发送至服务端进行存储。

6.如权利要求1所述的原笔迹手写输入方法，其特征在于，所述图片与所述用户形成关联关系。

7.一种基于WEB的原笔迹手写输入装置，其特征在于，包括以下模块：

接收模块，用于接收来自用户通过触发WEB浏览器而产生的启动签名命令；

事件注册模块，用于根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

事件获取模块，用于获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

响应模块，用于根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

发送模块，用于将所述图片发送至服务端存储。

8.一种终端，其特征在于，包括存储器和处理器；

所述存储器，用于存储程序指令；

所述处理器，用于执行所述程序指令，以执行以下步骤：

接收来自用户通过触发WEB浏览器而产生的启动签名命令；

根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

将所述图片发送至服务端存储。

9.如权利要求1所述的终端，其特征在于，当所述WEB浏览器的类型为移动终端浏览器时，注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，注册鼠标移动事件。10.如权利要求1所述的终端，其特征在于，所述图片与所述用户形成关联关系。

技术说明书

一种基于WEB的原笔迹手写输入方法、装置及终端

技术领域

本技术涉及计算机程序技术，具体涉及电子签名技术。

背景技术

当前市面上的无纸化原笔迹电子签名解决方案大多需要硬件和软件硬件相结合，通过

为电脑搭载原笔迹手写输入技术的终端(电磁屏搭配电磁笔)，借助这些硬件完成电子文档签名、批注、修改等关键应用。这样不但提高了成本，而且加大了实施和推广难度。

名词解释：

1、无纸化办公：指在不用纸张办公，在无纸化办公环境中进行的一种工作方式，无纸化办公需要硬件、软件与通信网络协力才能达到的办公体验。

2、原笔迹手写签名：这里指书面签名的数字图像化，将手写板上的书写痕迹直接数字化，并在电脑中原笔迹呈现。

技术内容

为了克服现有技术的不足，本技术的目的之一在于提供一种基于WEB的原笔迹手写输入方法，其能解决需要借助硬件才能实现电子签名的问题。

本技术的目的之二在于提供一种基于WEB的原笔迹手写输入装置，其能解决需要借助硬件才能实现电子签名的问题。

本技术的目的之三在于提供一种终端，其能解决需要借助硬件才能实现电子签名的问题。

为了实现上述目的之一，本技术所采用的技术方案如下：

一种基于WEB的原笔迹手写输入方法，其包括以下步骤：

接收来自用户通过触发WEB浏览器而产生的启动签名命令；

根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

将所述图片发送至服务端存储。

优选的，还包括以下步骤：当判断WEB浏览器支持签名画板功能时，在所述WEB浏览器上显示所述签名画板。

优选的，所述签名画板为基于canvas标签的签名画板。

优选的，当所述WEB浏览器的类型为移动终端浏览器时，注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，注册鼠标移动事件。

优选的，将所述图片发送至服务端存储的步骤具体为：将所述图片转换为字节流，将所述字节流通过HTTP协议发送至服务端进行存储。

优选的，所述图片与所述用户形成关联关系。

为了实现上述目的之二，本技术所采用的技术方案如下：

一种基于WEB的原笔迹手写输入装置，其包括以下模块：

接收模块，用于接收来自用户通过触发WEB浏览器而产生的启动签名命令；

事件注册模块，用于根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

事件获取模块，用于获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

响应模块，用于根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

发送模块，用于将所述图片发送至服务端存储。

为了实现上述目的之三，本技术所采用的技术方案如下：

一种终端，其包括存储器和处理器；

所述存储器，用于存储程序指令；

所述处理器，用于执行所述程序指令，以执行以下步骤：

接收来自用户通过触发WEB浏览器而产生的启动签名命令；

根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件；

获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件；

根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片；

将所述图片发送至服务端存储。

优选的，当所述WEB浏览器的类型为移动终端浏览器时，注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，注册鼠标移动事件。

优选的，所述图片与所述用户形成关联关系。

相比现有技术，本技术的有益效果在于：

用户可以脱离硬件限制，只需通过浏览器，即可做到随时随地签名批注。比如用户在浏览了电子文档或电子协议后，可以简单、直观地使用数字笔在屏幕上对电子文档或电子协议进行电子签名和批注操作。本技术自然直观的交互方式解决了原笔迹书写的数据交互难题，实现了数字化的手写批注和手写签名。

附图说明

图1为本技术较佳实施例的基于WEB的原笔迹手写输入方法的流程图；

图2为本技术较佳实施例的基于WEB的原笔迹手写输入装置的结构示意图；

图3为本技术较佳实施例的终端的结构示意图。

具体实施方式

下面，结合附图以及具体实施方式，对本技术做进一步描述：

如图1所示，本实施例提出了一种基于WEB的原笔迹手写输入方法，其包括以下步骤：

步骤S1、接收来自用户通过触发WEB浏览器而产生的启动签名命令。该步骤具体是，用户通过PC、手机或平板电脑(PAD)等设备打开WEB浏览器，访问支持原笔迹手写签名功能的网站，并启动签名功能。

步骤S2、当判断WEB浏览器支持签名画板功能时，在所述WEB浏览器上显示所述签名画板。本步骤具体为：判断所述WEB浏览器是否完整支持HTML5，若支持，则构建基于canvas标签的签名画板，在所述WEB浏览器上显示所述签名画板，该签名画板用于网页绘制图像，否则，提示用户不支持并禁止该签名画板功能。

步骤S3、根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件。本步骤具体为：可以通过userAgent判断所述WEB浏览器的类型，判断是注册鼠标移动事件还是触摸事件。例如，当所述WEB浏览器的类型为移动终端浏览器时，说明请求设备为手机或PAD，则注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，所述请求设备为PC，则注册鼠标移动事件。

步骤S4、获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件。本步骤具体为：监听用户通过鼠标或触摸屏在签名画板上的书写操作。

步骤S5、根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片。本步骤具体为：实时获取书写操作在签名画板上形成的坐标点，将各坐标点连接成线条，通过所述线条还原用户在签名画板上书写的原笔迹。

步骤S6、将所述图片发送至服务端存储。本步骤具体为：将原笔迹的图片导出成图片，将所述图片转换为字节流，将所述字节流通过HTTP协议发送至服务端进行存储。所述图片与所述用户形成关联关系。，形成对应的签名数据，以便用户后续调取使用。

如图2所示，与上述方法对应提出一种基于WEB的原笔迹手写输入装置，本装置为虚拟装置，其包括以下模块：

接收模块，用于接收来自用户通过触发WEB浏览器而产生的启动签名命令。本模块具体是，用户通过PC、手机或平板电脑(PAD)等设备打开WEB浏览器，访问支持原笔迹手写签名功能的网站，并启动签名功能。

判断模块，用于当判断WEB浏览器支持签名画板功能时，在所述WEB浏览器上显示所述签名画板。本模块具体为：判断所述WEB浏览器是否完整支持HTML5，若支持，则构建基于canvas标签的签名画板，在所述WEB浏览器上显示所述签名画板，该签名画板用于网页绘制图像，否则，提示用户不支持并禁止该签名画板功能。

事件注册模块，用于根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件。本模块具体为：可以通过userAgent判断所述WEB浏览器的类型，判断是注册鼠标移动事件还是触摸事件。例如，当所述WEB浏览器的类型为移动终端浏览器时，说明请求设备为手机或PAD，则注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，所述请求设备为PC，则注册鼠标移动事件。

事件获取模块，用于获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件。本模块具体为：监听用户通过鼠标或触摸屏在签名画板上的书写操作。

响应模块，用于根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片。本模块具体为：实时获取书写操作在签名画板上形成的坐标点，将各坐标点连接成线条，通过所述线条还原用户在签名画板上书写的原笔迹。

发送模块，用于将所述图片发送至服务端存储。本模块具体为：将原笔迹的图片导出成图片，将所述图片转换为字节流，将所述字节流通过HTTP协议发送至服务端进行存储。所述图片与所述用户形成关联关系。，形成对应的签名数据，以便用户后续调取使用。

如图3所示，与上述方法对应提出一种终端，其包括存储器和处理器。本终端为实体硬件装置。

所述存储器，用于存储程序指令；

所述处理器，用于执行所述程序指令，以执行以下步骤：

步骤S1、接收来自用户通过触发WEB浏览器而产生的启动签名命令。该步骤具体是，用户通过PC、手机或平板电脑(PAD)等设备打开WEB浏览器，访问支持原笔迹手写签名功能的网站，并启动签名功能。

步骤S2、当判断WEB浏览器支持签名画板功能时，在所述WEB浏览器上显示所述签名画板。本步骤具体为：判断所述WEB浏览器是否完整支持HTML5，若支持，则构建基于canvas标签的签名画板，在所述WEB浏览器上显示所述签名画板，该签名画板用于网页绘制图像，否则，提示用户不支持并禁止该签名画板功能。

步骤S3、根据所述WEB浏览器的类型，注册鼠标移动事件或触摸事件。本步骤具体为：可以通过userAgent判断所述WEB浏览器的类型，判断是注册鼠标移动事件还是触摸事件。例如，当所述WEB浏览器的类型为移动终端浏览器时，说明请求设备为手机或PAD，则注册触摸事件；当所述WEB浏览器的类型为电脑浏览器时，所述请求设备为PC，则注册鼠标移动事件。

步骤S4、获取基于鼠标移动事件的鼠标移动信号或基于触摸事件的触摸信号在签名画板上移动的事件。本步骤具体为：监听用户通过鼠标或触摸屏在签名画板上的书写操作。

步骤S5、根据所述签名画板上移动的事件形成线条，并将所述线条导出为图片。本步骤具体为：实时获取书写操作在签名画板上形成的坐标点，将各坐标点连接成线条，通过所述线条还原用户在签名画板上书写的原笔迹。

步骤S6、将所述图片发送至服务端存储。本步骤具体为：将原笔迹的图片导出成图片，将所述图片转换为字节流，将所述字节流通过HTTP协议发送至服务端进行存储。所述图片与所述用户形成关联关系，形成对应的签名数据，以便用户后续调取使用。

总体而言，本实施例旨在提供一种基于web的原笔迹手写输入技术，让用户可以通过浏览器，随时随地使用PC、手机、Pad等设备进行签审操作。其基本原理是：提供web原笔迹手写签名站点(通常以工具的形式依附于各类主网站中)，用户通过浏览器访问站点，当用户启动签名功能时，本实施例将通过Javascript自动生成签名画板，整合Html5的canvas技术收集用户签名绘图，导出签名数据，并将签名数据传输到服务端，服务端通过不同用户关联保持签名数据。

本实施例属于软件架构和软件工具领域，主要用于涉及大量审批环节的电子事务，如各类申请和文件审核工作，用于替代传统低效率，复杂冗长的纸质办公，为无纸化办公提供原笔迹手写电子签名解决方案。

对本领域的技术人员来说，可根据以上描述的技术方案以及构思，做出其它各种相应的改变以及形变，而所有的这些改变以及形变都应该属于本技术权利要求的保护范围之内。

本文来源：https://www.bwwdw.com/article/83le.html