CN113722031A - 一种电子签名的动态展示方法、设备、介质及产品 - Google Patents

Abstract

本发明涉及电子签名领域，公开了一种电子签名的动态展示方法，包括获取屏幕状态信息、调用Canvas画布、接收签名信息、坐标转换以及动态切换展示。本发明的一种电子签名的动态展示方法，保证了签名笔迹即使在屏幕状态发生变化时也不会发生因屏幕比例改变导致的错乱，根据移动终端对应的当前屏幕状态信息调用对应的目标画布签名笔迹或隐藏画布签名笔迹进行动态切换展示，使电子签名的笔迹不会受到移动终端屏幕状态切换的影响，保证了电子签名中笔迹的完整性和统一性。

Description

一种电子签名的动态展示方法、设备、介质及产品

技术领域

本发明涉及电子签名领域，尤其涉及一种电子签名的动态展示方法、设备、介质及产品。

背景技术

电子签名广泛应用与电子合同中，使用移动终端书写电子签名方便快捷，但是在使用移动终端进行签字时，很可能由于移动终端的横竖屏切换，导致屏幕比例发生改变，此时导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位、混乱，最终生成的图片无法辨认签字人的姓名。如图2所示，为用户在移动终端横屏时进行签名后Canvas画布上呈现的电子签名；随着移动终端由横屏切换到竖屏时，此时由于屏幕比例发生变化，电子签名在竖屏显示时发生了笔迹错乱的现象，如图3所示。

因此，目前在进行电子签名时，由于移动终端的横竖屏切换，导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位。

发明内容

为了克服现有技术的不足，本发明的目的之一在于提供一种电子签名的动态展示方法，其能解决目前在进行电子签名时，由于移动终端的横竖屏切换，导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位的问题。

本发明的目的之二在于提供一种电子设备，其能解决目前在进行电子签名时，由于移动终端的横竖屏切换，导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位的问题。

本发明的目的之三在于提供一种计算机可读存储介质，其能解决目前在进行电子签名时，由于移动终端的横竖屏切换，导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位的问题。

本发明的目的之四在于提供一种计算机程序产品，其能解决目前在进行电子签名时，由于移动终端的横竖屏切换，导致在HTML5中的Canvas标签的绘图中书写的电子签名出现笔迹错位的问题。

本发明的目的之一采用以下技术方案实现：

一种电子签名的动态展示方法，包括以下步骤：

获取屏幕状态信息，获取用户通过应用客户端发送电子签名请求时移动终端的屏幕状态信息；

调用Canvas画布，根据所述屏幕状态信息在预先存储的横屏Canvas画布和竖屏Canvas画布之间选取其中一个作为目标画布并在屏幕展示区域中进行展示，将另一个画布作为隐藏画布不进行展示；

接收签名信息，获取用户在所述目标画布上输入的含有目标画布签名点坐标信息的签名信息，根据所述目标画布签名点坐标信息在目标画布上绘制出目标画布签名笔迹；

坐标转换，根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息，根据所述隐藏画布签名点坐标信息在隐藏画布上绘制出隐藏画布签名笔迹；

动态切换展示，实时监听移动终端对应的当前屏幕状态信息，根据当前屏幕状态信息将对应的目标画布签名笔迹或隐藏画布签名笔迹在移动终端的屏幕展示区域进行动态切换展示。

进一步地，在所述调用Canvas画布之前还包括创建Canvas画布，获取移动终端对应屏幕展示区域的高度值和宽度值，根据移动终端竖屏时对应屏幕展示区域的高度值和宽度值设置横屏Canvas画布和竖屏Canvas画布。

进一步地，所述横屏Canvas画布与移动终端对应屏幕展示区域的高度值和宽度值相同，所述画布尺寸关系具体为：所述横屏Canvas画布的高度值等于所述竖屏Canvas画布的宽度值，所述横屏Canvas画布的宽度值等于所述竖屏Canvas画布的高度值。

进一步地，当所述目标画布为竖屏Canvas画布以及所述隐藏画布为横屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中纵轴坐标值作为隐藏画布签名点坐标信息中的横轴坐标值，将隐藏画布的高度值与目标画布签名点坐标信息中横轴坐标值的差值作为隐藏画布签名点坐标信息中的纵轴坐标值。

进一步地，当所述目标画布为横屏Canvas画布以及所述隐藏画布为竖屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中横轴坐标值作为隐藏画布签名点坐标信息中的纵轴坐标值，将目标画布的高度值与目标画布签名点坐标信息中纵轴坐标值的差值作为隐藏画布签名点坐标信息中的横轴坐标值。

进一步地，还包括生成签字图片，接收用户通过应用客户端发送的保存请求，根据保存请求对所述目标画布签名笔迹或隐藏画布签名笔迹生成签名图片并保存。

进一步地，所述获取屏幕状态信息为横屏状态或竖屏状态，当所述获取屏幕状态信息为横屏状态时，选取横屏Canvas画布作为目标画布以及将竖屏Canvas画布作为隐藏画布，当所述获取屏幕状态信息为竖屏状态时，选取竖屏Canvas画布作为目标画布以及将横屏Canvas画布作为隐藏画布。

本发明的目的之二采用以下技术方案实现：

一种电子设备，包括：处理器；

存储器；以及程序，其中所述程序被存储在所述存储器中，并且被配置成由处理器执行，所述程序包括用于执行本申请中所述的一种电子签名的动态展示方法。

本发明的目的之三采用以下技术方案实现：

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行本申请中所述的一种电子签名的动态展示方法。

本发明的目的之四采用以下技术方案实现：

一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现本申请中所述的一种电子签名的动态展示方法。

相比现有技术，本发明的有益效果在于：本申请中的一种电子签名的动态展示方法，通过设置横屏Canvas画布和竖屏Canvas画布，并根据移动终端屏幕状态来为用户展示对应的画布，将另一画布隐藏，在用户进行签名时，将目标画布上的签名信息进行坐标转换从而在隐藏画布上绘制出隐藏画布签名笔迹，实现了目标画布上的签名笔迹等比例转换到隐藏画布上，保证了签名笔迹即使在屏幕状态发生变化时也不会发生因屏幕比例改变导致的错乱，根据移动终端对应的当前屏幕状态信息调用对应的目标画布签名笔迹或隐藏画布签名笔迹进行动态切换展示，使电子签名的笔迹不会受到移动终端屏幕状态切换的影响，保证了电子签名中笔迹的完整性和统一性。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。本发明的具体实施方式由以下实施例及其附图详细给出。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明的一种电子签名的动态展示方法的流程示意图；

图2为现有技术中用户在移动终端横屏时进行签名后Canvas画布上呈现的电子签名示意图；

图3为现有技术中图2中的电子签名在移动终端由横屏装换为竖屏时的示意图；

图4为本发明的一种电子签名的动态展示方法中当移动终端的屏幕状态为竖屏状态时，目标画布和隐藏画布的展示示意图。

图5为本发明的一种电子签名的动态展示方法中当移动终端的屏幕状态为横屏状态时，目标画布和隐藏画布的展示示意图；

图6为本发明的一种电子签名的动态展示方法中当目标画布为竖屏Canvas画布以及所述隐藏画布为横屏Canvas画布时的坐标转换示意图；

图7为本发明的一种电子签名的动态展示方法中用户在移动终端横屏时进行签名后Canvas画布上呈现的电子签名示意图；

图8为本发明的一种电子签名的动态展示方法中图7中的电子签名在移动终端由横屏装换为竖屏时Canvas画布上呈现的电子签名示意图。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。

在本实施例中HTML5是HTML(Hyper Text Markup Language，超文本标记语言)最新的修订版本，2014年10月由W3C(万维网联盟)完成标准制定，目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。Canvas是HTML5中新增的一个重要元素，专门用来绘制图像，常用于电子签名，在网页上放置一个Canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。Canvas自身是一款矢量绘图软件，软件的程序能够无缝集成用于绘画、图像编辑和Web设计的等工具，能够以多种的格式(包括动画和Web就绪文件)导出绘画图像，且其在剪辑图库上还捆绑了许多用于位图编辑、展示、Web图形和矢量图绘制的工具。

如图1所示，本申请的一种电子签名的动态展示方法，包括以下步骤：

创建Canvas画布，获取移动终端对应屏幕展示区域的高度值和宽度值，根据移动终端竖屏时对应屏幕展示区域的高度值和宽度值设置横屏Canvas画布和竖屏Canvas画布。在本实施例中，移动终端为手机、平板电脑等终端显示设备，首先需要获取移动终端的屏幕展示区域的尺寸信息，即可视区域的宽度值和高度值，在全屏状态下使用window.outerWidth以及window.outerHeight获取浏览器可视区域宽度以及高度(包含了隐藏的标题栏以及菜单栏)，window.outerWidth以及window.outerHeight为行业内通用的获取浏览器可视区域的宽度和高度的工具。此时根据屏幕展示区域的宽度值和高度值创建两个宽度值和高度值相反的Canvas画布，即横屏Canvas画布和竖屏Canvas画布，所述横屏Canvas画布的高度值等于所述竖屏Canvas画布的宽度值，所述横屏Canvas画布的宽度值等于所述竖屏Canvas画布的高度值；所述横屏Canvas画布与移动终端对应屏幕展示区域的高度值和宽度值相同。

获取屏幕状态信息，获取用户通过应用客户端发送电子签名请求时移动终端的屏幕状态信息。在本实施例中，当用户需要进行签名时，用户需要通过移动终端上安装的用于进行电子签名的应用客户端发送电子签名请求，在获取到电子签名请求时，需要获取此时移动终端的屏幕状态信息，屏幕状态信息为横屏状态或竖屏状态。

调用Canvas画布，根据所述屏幕状态信息在预先存储的横屏Canvas画布和竖屏Canvas画布之间选取其中一个作为目标画布并在屏幕展示区域中进行展示，将另一个画布作为隐藏画布不进行展示。为了响应用户发送的电子签名请求，此时根据屏幕状态信息在之前创建的横屏Canvas画布和竖屏Canvas画布之间选取其中一个作为目标画布并在屏幕展示区域中进行展示，将另一个画布作为隐藏画布不进行展示；如图4所示，当移动终端的屏幕状态为竖屏时，此时将竖屏Canvas画布作为目标画布，并在屏幕展示区域中进行展示，如图4中的实线框，此时竖屏Canvas画布的签字方向的状态为展示，对应的横屏Canvas画布将作为隐藏画布，不进行展示，如图4中虚线框所示。如图5所示，当移动终端的屏幕状态为横屏状态时，此时将横屏Canvas画布作为目标画布，并在屏幕展示区域中进行展示，如图5中的实线框，对应的竖屏Canvas画布将作为隐藏画布，不进行展示，如图5中虚线框所示。

接收签名信息，获取用户在所述目标画布上输入的含有目标画布签名点坐标信息的签名信息，根据所述目标画布签名点坐标信息在目标画布上绘制出目标画布签名笔迹。在本实施例中，用户的签名信息在画布以坐标点的形式存在，在本实施例中，用户在目标画布上每触摸一个点就会生成对应的目标画布坐标点，首先，需要监听目标画布上的touchstart事件(移动端触摸事件)，当用户开始触摸屏幕时，则触发touchstart事件，此时通过画布节点提供的changedTouches(涉及当前(引发)事件的触摸点的列表)属性，得到当前触摸的点对应目标画布的坐标，即得到目标画布签名点坐标信息，并根据目标画布签名点坐标信息绘制出对应的目标画布签名笔迹，实质为将所有的目标画布签名点连在一起，即得到对应的笔迹。

坐标转换，根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息，根据所述隐藏画布签名点坐标信息在隐藏画布上绘制出隐藏画布签名笔迹。在本实施例中，因为所述横屏Canvas画布的高度值等于所述竖屏Canvas画布的宽度值，所述横屏Canvas画布的宽度值等于所述竖屏Canvas画布的高度值，因此所述目标画布与所述隐藏画布之间的额画布尺寸关系为高度值和宽度值互为相反值。如图6所示，当目标画布为竖屏Canvas画布以及所述隐藏画布为横屏Canvas画布时的坐标转换示意图，此时，目标画布为竖屏Canvas画布且为矩形，在竖屏Canvas画布上建立直角坐标系，并选取一点作为原点，图5示例中将竖屏Canvas画布的左上角顶点作为原点，令竖屏Canvas画布的宽度值为375mm，高度值为665mm，此时竖屏Canvas画布中的四个顶点坐标分别为:(0,0)(375,0)(0,665)，(375,665)，那么在对应的隐藏画布(横屏Canvas画布)的坐标系中，也将其左上角顶点作为直角坐标系的原点，此时其对应的四个顶点坐标为(0,0)(665,0)(0,375)，(665,375)，以图5为例，假设竖屏Canvas画布上某一点坐标为x＝375,y＝0,那么转换到横屏Canvas画布相对应的点为x＝0,y＝0；具体计算过程如下：

令竖屏Canvas画布的宽度值为scw,高度值为sch，隐藏画布(横屏Canvas画布)的宽度值为hcw＝sch,高度值为hch＝scw，竖屏Canvas画布上任意一点坐标为(sx,sy)，对应隐藏的横屏画布坐标为(hx，hy)，则hx(隐藏画布的横坐标)＝sy(目标画布的纵坐标)。hy(隐藏画布的纵坐标)＝hch(隐藏画布的高)–sx(目标画布的横坐标)。综上可得，当所述目标画布为竖屏Canvas画布以及所述隐藏画布为横屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中纵轴坐标值作为隐藏画布签名点坐标信息中的横轴坐标值，将隐藏画布的高度值与目标画布签名点坐标信息中横轴坐标值的差值作为隐藏画布签名点坐标信息中的纵轴坐标值。根据上述方法同理可得，当所述目标画布为横屏Canvas画布以及所述隐藏画布为竖屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中横轴坐标值作为隐藏画布签名点坐标信息中的纵轴坐标值，将目标画布的高度值与目标画布签名点坐标信息中纵轴坐标值的差值作为隐藏画布签名点坐标信息中的横轴坐标值。因此，在本实施例中，在目标画布上绘制出目标画布签名笔迹时还在根据所述隐藏画布签名点坐标信息在隐藏画布上绘制出隐藏画布签名笔迹。

动态切换展示，实时监听移动终端对应的当前屏幕状态信息，根据当前屏幕状态信息将对应的目标画布签名笔迹或隐藏画布签名笔迹在移动终端的屏幕展示区域进行动态切换展示。在进行上述的坐标转换后，会根据用户手中移动终端的当前屏幕状态信息将对应的目标画布签名笔迹或隐藏画布签名笔迹在对应的画布上进行展示。对于电子签名，用户在移动终端横屏时进行签名后Canvas画布上呈现的电子签名示意图如图7所示，将图7中的电子签名在移动终端由横屏装换为竖屏时对应的展示效果如图8所示。

生成签字图片，接收用户通过应用客户端发送的保存请求，根据保存请求对所述目标画布签名笔迹或隐藏画布签名笔迹生成签名图片并保存。

本发明中还提供了一种电子设备，包括：处理器；

存储器；以及程序，其中所述程序被存储在所述存储器中，并且被配置成由处理器执行，所述程序包括用于执行本申请中所述的一种电子签名的动态展示方法。

本发明中还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行本申请中所述的一种电子签名的动态展示方法。

本发明中还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现本申请中所述的一种电子签名的动态展示方法。

本申请中的一种电子签名的动态展示方法，通过设置横屏Canvas画布和竖屏Canvas画布，并根据移动终端屏幕状态来为用户展示对应的画布，将另一画布隐藏，在用户进行签名时，将目标画布上的签名信息进行坐标转换从而在隐藏画布上绘制出隐藏画布签名笔迹，实现了目标画布上的签名笔迹等比例转换到隐藏画布上，保证了签名笔迹即使在屏幕状态发生变化时也不会发生因屏幕比例改变导致的错乱，根据移动终端对应的当前屏幕状态信息调用对应的目标画布签名笔迹或隐藏画布签名笔迹进行动态切换展示，使电子签名的笔迹不会受到移动终端屏幕状态切换的影响，保证了电子签名中笔迹的完整性和统一性。

以上，仅为本发明的较佳实施例而已，并非对本发明作任何形式上的限制；凡本行业的普通技术人员均可按说明书附图所示和以上而顺畅地实施本发明；但是,凡熟悉本专业的技术人员在不脱离本发明技术方案范围内，利用以上所揭示的技术内容而做出的些许更动、修饰与演变的等同变化，均为本发明的等效实施例；同时,凡依据本发明的实质技术对以上实施例所作的任何等同变化的更动、修饰与演变等，均仍属于本发明的技术方案的保护范围之内。

Claims (10)

1.一种电子签名的动态展示方法，其特征在于：包括以下步骤：

获取屏幕状态信息，获取用户通过应用客户端发送电子签名请求时移动终端的屏幕状态信息；

调用Canvas画布，根据所述屏幕状态信息在预先存储的横屏Canvas画布和竖屏Canvas画布之间选取其中一个作为目标画布并在屏幕展示区域中进行展示，将另一个画布作为隐藏画布不进行展示；

接收签名信息，获取用户在所述目标画布上输入的含有目标画布签名点坐标信息的签名信息，根据所述目标画布签名点坐标信息在目标画布上绘制出目标画布签名笔迹；

坐标转换，根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息，根据所述隐藏画布签名点坐标信息在隐藏画布上绘制出隐藏画布签名笔迹；

动态切换展示，实时监听移动终端对应的当前屏幕状态信息，根据当前屏幕状态信息将对应的目标画布签名笔迹或隐藏画布签名笔迹在移动终端的屏幕展示区域进行动态切换展示。

2.如权利要求1所述的一种电子签名的动态展示方法，其特征在于：在所述调用Canvas画布之前还包括创建Canvas画布，获取移动终端对应屏幕展示区域的高度值和宽度值，根据移动终端竖屏时对应屏幕展示区域的高度值和宽度值设置横屏Canvas画布和竖屏Canvas画布。

3.如权利要求2所述的一种电子签名的动态展示方法，其特征在于：所述横屏Canvas画布与移动终端对应屏幕展示区域的高度值和宽度值相同，所述画布尺寸关系具体为：所述横屏Canvas画布的高度值等于所述竖屏Canvas画布的宽度值，所述横屏Canvas画布的宽度值等于所述竖屏Canvas画布的高度值。

4.如权利要求3所述的一种电子签名的动态展示方法，其特征在于：当所述目标画布为竖屏Canvas画布以及所述隐藏画布为横屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中纵轴坐标值作为隐藏画布签名点坐标信息中的横轴坐标值，将隐藏画布的高度值与目标画布签名点坐标信息中横轴坐标值的差值作为隐藏画布签名点坐标信息中的纵轴坐标值。

5.如权利要求3所述的一种电子签名的动态展示方法，其特征在于：当所述目标画布为横屏Canvas画布以及所述隐藏画布为竖屏Canvas画布时，所述根据所述目标画布与所述隐藏画布之间的画布尺寸关系将目标画布签名点坐标信息转换为与隐藏画布对应的隐藏画布签名点坐标信息具体为：将目标画布签名点坐标信息中横轴坐标值作为隐藏画布签名点坐标信息中的纵轴坐标值，将目标画布的高度值与目标画布签名点坐标信息中纵轴坐标值的差值作为隐藏画布签名点坐标信息中的横轴坐标值。

6.如权利要求1所述的一种电子签名的动态展示方法，其特征在于：还包括生成签字图片，接收用户通过应用客户端发送的保存请求，根据保存请求对所述目标画布签名笔迹或隐藏画布签名笔迹生成签名图片并保存。

7.如权利要求1所述的一种电子签名的动态展示方法，其特征在于：所述获取屏幕状态信息为横屏状态或竖屏状态，当所述获取屏幕状态信息为横屏状态时，选取横屏Canvas画布作为目标画布以及将竖屏Canvas画布作为隐藏画布，当所述获取屏幕状态信息为竖屏状态时，选取竖屏Canvas画布作为目标画布以及将横屏Canvas画布作为隐藏画布。

8.一种电子设备，其特征在于包括：处理器；

存储器；以及程序，其中所述程序被存储在所述存储器中，并且被配置成由处理器执行，所述程序包括用于执行权利要求1-7中任意一项所述的一种电子签名的动态展示方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行权利要求1-7中任意一项所述的一种电子签名的动态展示方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1-7中任意一项所述的一种电子签名的动态展示方法。

Images