[發明專利]一種基于canvas實現移動端防篡改的電子簽名方法

在審

• 申請號: 201811024226.X
• 申請日: 2018-09-04
• 公開（公告）號: CN109299620A
• 公開（公告）日: 2019-02-01
• 發明（設計）人: 張麗寶;邵輝;王宏達;康凱
• 申請（專利權）人: 山東浪潮通軟信息科技有限公司
• 主分類號: G06F21/64
• 分類號: G06F21/64;G06T11/80
• 代理公司: 濟南信達專利事務所有限公司 37100
• 代理人: 闞恭勇

1.一種基于canvas實現移動端防篡改的電子簽名方法，其特征在于，

主要包括兩個方面

A、基于canvas實現移動端電子簽名，

B、簽名后生成圖片防止篡改。

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

基于HTML5新增的<canvas>，使用腳本在其中繪制圖像的HTML元素，通過一套完整的繪圖函數來動態生成圖形，繪制出個人的簽名。

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

生成個人的簽名圖形后，通過canvas提供的方法toDataURL()，把畫布里的圖案轉變成png或者其他格式的圖片，生成圖片后圖形不可更改。

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

具體步驟如下：

1）繪制圖像

1.1）創建畫布

在HTML頁面中使用 <canvas> 元素來創建一個畫布，設置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生成一個圖片，在經后臺轉碼解析，存入服務器，相關地址存入數據庫中。