CN109299620A - 一种基于canvas实现移动端防篡改的电子签名方法 - Google Patents

Abstract

本发明提供一种基于canvas实现移动端防篡改的电子签名方法，属于移动端电子签名技术领域，本发明通过HTML5中的<canvas>标签来绘制图形，通过脚本javaScript来完成图形绘制。通过该方法用户可以在移动端实现个人签名，签名后生成固定图片，防止被篡改。该方法能更有效的识别签名人的身份，表明签名人认可其中的内容数据。

Description

一种基于canvas实现移动端防篡改的电子签名方法

技术领域

本发明涉及移动端电子签名技术，尤其涉及一种基于canvas实现移动端防篡改的电子签名方法。

背景技术

随着计算机科学和网络技术的发展,信息的安全问题越来越突出。签名技术是密码技术的一个重要分支,能够进行身份认证、保证信息的完整性、防抵赖等；近几年，智能移动终端的软硬件技术和无线通信技术得到了迅猛的发展，同时也促进了移动办公系统的广泛应用，移动端电子签名尤为重要。

发明内容

为了解决以上技术问题，本发明提出了一种基于canvas实现移动端防篡改的电子签名方法，满足移动端实现防篡改的电子签名的业务需求。

本发明的技术方案是：

一种基于canvas实现移动端防篡改的电子签名方法，主要包括两个方面

A、基于canvas实现移动端电子签名，

B、签名后生成图片防止篡改。

基于HTML5新增的&lt;canvas&gt;，使用脚本(通常为JavaScript)在其中绘制图像的HTML元素，通过一套完整的绘图函数来动态生成图形，绘制出个人的签名。

生成个人的签名图形后，通过canvas提供的方法toDataURL()，这个方法能把画布里的图案转变成png或者其他格式的图片，生成图片后图形不可更改。

具体步骤如下：

1、绘制图像

1)创建画布

在HTML页面中使用&lt;canvas&gt;元素来创建一个画布，设置id属性，设置height和width确定画布大小。

2)通过JavaScript来绘制图像

首先找到canvas元素，创建context对象，在getContext("2d")对象是内建的HTML5对象。

3)绘制图像

当手指触碰屏幕，通过侦听touchstart事件，创建路径的事件beginPath()；

当手指在屏幕上滑动时，通过侦听touchmove事件，把画笔移动到指定的坐标moveTo(x,y)，相当于设置路径的起始点坐标，通过stroke()进行绘制；

当手指离开屏幕，通过侦听touchend事件，通过closePath()结束绘制。

2、保存图片

通过canvas.toDataURL()方法将绘制的图像直接保存成base64码，通过后台解析，将图片保存到服务器；当实际功能用到签名时，通过html2canvas将整个HTML生成一个图片，在经后台转码解析，存入服务器，相关地址存入数据库中。

本发明的有益效果是

用户通过本发明可以在移动端实现个人签名，签名后生成固定图片，防止被篡改。能更有效的识别签名人的身份，表明签名人认可其中的内容数据。本发明简单方便，易于实际工作，具有很好的使用价值。

附图说明

图1是移动电子签名的流程图。

具体实施方式

下面对本发明的内容进行更加详细的阐述：

实现步骤：

1、首先创建画布，然后通过JavaScript绘制图像，如下：

2、绘制结束后，将绘制的图形生成图片，如下：

3、涉及到签名的HTML页面，将整个HTML生成图片，如下：

通过该方法用户可以在移动端实现个人签名，签名后生成固定图片，防止被篡改。

Claims (4)

1.一种基于canvas实现移动端防篡改的电子签名方法，其特征在于，

主要包括两个方面

A、基于canvas实现移动端电子签名，

B、签名后生成图片防止篡改。

2.根据权利要求1所述的方法，其特征在于，

基于HTML5新增的&lt;canvas&gt;，使用脚本在其中绘制图像的HTML元素，通过一套完整的绘图函数来动态生成图形，绘制出个人的签名。

3.根据权利要求2所述的方法，其特征在于，

生成个人的签名图形后，通过canvas提供的方法toDataURL()，把画布里的图案转变成png或者其他格式的图片，生成图片后图形不可更改。

4.根据权利要求3所述的方法，其特征在于，

具体步骤如下：

1）绘制图像

1.1）创建画布

在HTML页面中使用 &lt;canvas&gt; 元素来创建一个画布，设置id属性，设置height和width确定画布大小；

1.2）通过JavaScript来绘制图像

首先找到canvas元素，创建context对象，在getContext("2d") 对象是内建的 HTML5对象；

1.3）绘制图像

当手指触碰屏幕，通过侦听touchstart事件，创建路径的事件beginPath（）；

当手指在屏幕上滑动时，通过侦听touchmove事件，把画笔移动到指定的坐标moveTo(x, y)，相当于设置路径的起始点坐标，通过stroke()进行绘制；

当手指离开屏幕，通过侦听touchend 事件，通过closePath()结束绘制；

2）、保存图片

通过canvas.toDataURL()方法将绘制的图像直接保存成base64码，通过后台解析，将图片保存到服务器；当实际功能用到签名时，通过html2canvas将整个HTML生成一个图片，在经后台转码解析，存入服务器，相关地址存入数据库中。