記錄--前端實現電子簽名（web、移動端）通用

来源:https://www.cnblogs.com/smileZAZ/archive/2023/03/15/17219400.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 在現在的時代發展中，從以前的手寫簽名，逐漸衍生出了電子簽名。電子簽名和紙質手寫簽名一樣具有法律效應。電子簽名目前主要還是在需要個人確認的產品環節和司法類相關的產品上較多。 舉個常用的例子，大家都用過釘釘，釘釘上面就有電子簽名，相信大 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

在現在的時代發展中，從以前的手寫簽名，逐漸衍生出了電子簽名。電子簽名和紙質手寫簽名一樣具有法律效應。電子簽名目前主要還是在需要個人確認的產品環節和司法類相關的產品上較多。

舉個常用的例子，大家都用過釘釘，釘釘上面就有電子簽名，相信大家這肯定是知道的。

那作為前端的我們如何實現電子簽名呢？其實在html5中已經出現了一個重要級別的輔助標簽，是啥呢？那就是canvas。

什麼是canvas

Canvas（畫布）是在HTML5中新增的標簽用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的點陣圖（bitmap）。Canvas 對象表示一個 HTML 畫布元素 -。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。

大白話就是canvas是一個可以在上面通過javaScript畫圖的標簽，通過其提供的context(上下文)及Api進行繪製，在這個過程中canvas充當畫布的角色。

<canvas></canvas>

如何使用

canvas給我們提供了很多的Api，供我們使用，我們只需要在body標簽中創建一個canvas標簽，在script標簽中拿到canvas這個標簽的節點，並創建context(上下文)就可以使用了。

...
<body>
    <canvas></canvas>
</body>
<script>
    // 獲取canvas 實例
    const canvas = document.querySelector('canvas')
    canvas.getContext('2d')
</script>
...

步入正題。

實現電子簽名

知道幾何的朋友都很清楚，線有點繪成，面由線繪成。

多點成線，多線成面。

所以我們實際只需要拿到當前觸摸的坐標點，進行成線處理就可以了。

在body中添加canvas標簽

在這裡我們不僅需要在在body中添加canvas標簽，我們還需要添加兩個按鈕，分別是取消和保存（後面我們會用到）。

<body>
    <canvas></canvas>
    <div>
        <button>取消</button>
        <button>保存</button>
    </div>
</body>

添加文件

我這裡全程使用js進行樣式設置及添加。

// 配置內容
    const config = {
        width: 400, // 寬度
        height: 200, // 高度
        lineWidth: 5, // 線寬
        strokeStyle: 'red', // 線條顏色
        lineCap: 'round', // 設置線條兩端圓角
        lineJoin: 'round', // 線條交匯處圓角
    }

獲取canvas實例

這裡我們使用querySelector獲取canvas的dom實例，並設置樣式和創建上下文。

    // 獲取canvas 實例
    const canvas = document.querySelector('canvas')
    // 設置寬高
    canvas.width = config.width
    canvas.height = config.height
    // 設置一個邊框，方便我們查看及使用
    canvas.style.border = '1px solid #000'
    // 創建上下文
    const ctx = canvas.getContext('2d')

基礎設置

我們將canvas的填充色為透明，並繪製填充一個矩形，作為我們的畫布，如果不設置這個填充背景色，在我們初識渲染的時候是一個黑色背景，這也是它的一個預設色。

    // 設置填充背景色
    ctx.fillStyle = 'transparent'
    // 繪製填充矩形
    ctx.fillRect(
        0, // x 軸起始繪製位置
        0, // y 軸起始繪製位置
        config.width, // 寬度
        config.height // 高度
    );

上次繪製路徑保存

這裡我們需要聲明一個對象，用來記錄我們上一次繪製的路徑結束坐標點及偏移量。

  • 保存上次坐標點這個我不用說大家都懂；
  • 為啥需要保存偏移量呢，因為滑鼠和畫布上的距離是存在一定的偏移距離，在我們繪製的過程中需要減去這個偏移量，才是我們實際的繪製坐標。
  • 但我發現chrome中不需要減去這個偏移量，拿到的就是實際的坐標，之前在微信小程式中使用就需要減去偏移量，需要在小程式中使用的朋友需要註意這一點哦。
    // 保存上次繪製的 坐標及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐標
        endY: 0
    }

設備相容

我們需要它不僅可以在web端使用，還需要在移動端使用，我們需要給它做設備相容處理。我們通過調用navigator.userAgent獲取當前設備信息，進行正則匹配判斷。

    // 判斷是否為移動端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

初始化

這裡我們在監聽滑鼠按下(mousedown)(web端)/觸摸開始(touchstart)的時候進行初始化，事件監聽採用addEventListener。

    // 創建滑鼠/手勢按下監聽器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)

三元判斷說明： 這裡當mobileStatus為true時則表示為移動端，反之則為web端，後續使用到的三元依舊是這個意思。

聲明初始化方法

我們添加一個init方法作為監聽滑鼠按下/觸摸開始的回調方法。

這裡我們需要獲取到當前滑鼠按下/觸摸開始的偏移量和坐標，進行起始點繪製。

Tips：web端可以直接通過event中取到，而移動端則需要在event.changedTouches[0]中取到。

這裡我們在初始化後再監聽滑鼠的移動。

    // 初始化
    const init = event => {
        // 獲取偏移量及坐標
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐標
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之後的所有路徑，進行繪製
        ctx.beginPath()

        // 根據配置文件設置進行相應配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin

        // 設置畫線起始點位
        ctx.moveTo(client.endX, client.endY)

        // 監聽 滑鼠移動或手勢移動
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }

繪製

這裡我們添加繪製draw方法，作為監聽滑鼠移動/觸摸移動的回調方法。

    // 繪製
    const draw = event => {
        // 獲取當前坐標點位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最後一次繪製的坐標點
        client.endX = pageX
        client.endY = pageY

        // 根據坐標點位移動添加線條
        ctx.lineTo(pageX , pageY )

        // 繪製
        ctx.stroke()
    }

結束繪製

添加了監聽滑鼠移動/觸摸移動我們一定要記得取消監聽並結束繪製，不然的話它會一直監聽並繪製的。

這裡我們創建一個cloaseDraw方法作為滑鼠彈起/結束觸摸的回調方法來結束繪製並移除滑鼠移動/觸摸移動的監聽。

canvas結束繪製則需要調用closePath()讓其結束繪製

    // 結束繪製
    const cloaseDraw = () => {
        // 結束繪製
        ctx.closePath()
        // 移除滑鼠移動或手勢移動監聽器
        window.removeEventListener("mousemove", draw)
    }

添加結束回調監聽器

    // 創建滑鼠/手勢 彈起/離開 監聽器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)

ok，現在我們的電子簽名功能還差一丟丟可以實現完了，現在已經可以正常的簽名了。

我們來看一下效果：

291891492291361822022-12-07-11-13-41.gif

取消功能/清空畫布

我們在剛開始創建的那兩個按鈕開始排上用場了。

這裡我們創建一個cancel的方法作為取消並清空畫布使用

    // 取消-清空畫布
    const cancel = () => {
        // 清空當前畫布上的所有繪製內容
        ctx.clearRect(0, 0, config.width, config.height)
    }

然後我們將這個方法和取消按鈕進行綁定

     <button onclick="cancel()">取消</button>

保存功能

這裡我們創建一個save的方法作為保存畫布上的內容使用。

將畫布上的內容保存為圖片/文件的方法有很多，比較常見的是blob和toDataURL這兩種方案，但toDataURL這哥們沒blob強，適配也不咋滴。所以我們這裡採用a標簽 ➕ blob方案實現圖片的保存下載。

    // 保存-將畫布內容保存為圖片
    const save = () => {
        // 將canvas上的內容轉成blob流
        canvas.toBlob(blob => {
            // 獲取當前時間並轉成字元串，用來當做文件名
            const date = Date.now().toString()
            // 創建一個 a 標簽
            const a = document.createElement('a')
            // 設置 a 標簽的下載文件名
            a.download = `${date}.png`
            // 設置 a 標簽的跳轉路徑為 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手動觸發 a 標簽的點擊事件
            a.click()
            // 移除 a 標簽
            a.remove()
        })
    }

然後我們將這個方法和保存按鈕進行綁定

    <button onclick="save()">保存</button>

我們將剛剛繪製的內容進行保存，點擊保存按鈕，就會進行下載保存

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <div>
        <button onclick="cancel()">取消</button>
        <button onclick="save()">保存</button>
    </div>
</body>
<script>
    // 配置內容
    const config = {
        width: 400, // 寬度
        height: 200, // 高度
        lineWidth: 5, // 線寬
        strokeStyle: 'red', // 線條顏色
        lineCap: 'round', // 設置線條兩端圓角
        lineJoin: 'round', // 線條交匯處圓角
    }

    // 獲取canvas 實例
    const canvas = document.querySelector('canvas')
    // 設置寬高
    canvas.width = config.width
    canvas.height = config.height
    // 設置一個邊框
    canvas.style.border = '1px solid #000'
    // 創建上下文
    const ctx = canvas.getContext('2d')

    // 設置填充背景色
    ctx.fillStyle = 'transparent'
    // 繪製填充矩形
    ctx.fillRect(
        0, // x 軸起始繪製位置
        0, // y 軸起始繪製位置
        config.width, // 寬度
        config.height // 高度
    );

    // 保存上次繪製的 坐標及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐標
        endY: 0
    }

    // 判斷是否為移動端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化
    const init = event => {
        // 獲取偏移量及坐標
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐標
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之後的所有路徑，進行繪製
        ctx.beginPath()
        // 根據配置文件設置相應配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin
        // 設置畫線起始點位
        ctx.moveTo(client.endX, client.endY)
        // 監聽 滑鼠移動或手勢移動
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 繪製
    const draw = event => {
        // 獲取當前坐標點位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最後一次繪製的坐標點
        client.endX = pageX
        client.endY = pageY

        // 根據坐標點位移動添加線條
        ctx.lineTo(pageX , pageY )

        // 繪製
        ctx.stroke()
    }
    // 結束繪製
    const cloaseDraw = () => {
        // 結束繪製
        ctx.closePath()
        // 移除滑鼠移動或手勢移動監聽器
        window.removeEventListener("mousemove", draw)
    }
    // 創建滑鼠/手勢按下監聽器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
    // 創建滑鼠/手勢 彈起/離開 監聽器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
    // 取消-清空畫布
    const cancel = () => {
        // 清空當前畫布上的所有繪製內容
        ctx.clearRect(0, 0, config.width, config.height)
    }
    // 保存-將畫布內容保存為圖片
    const save = () => {
        // 將canvas上的內容轉成blob流
        canvas.toBlob(blob => {
            // 獲取當前時間並轉成字元串，用來當做文件名
            const date = Date.now().toString()
            // 創建一個 a 標簽
            const a = document.createElement('a')
            // 設置 a 標簽的下載文件名
            a.download = `${date}.png`
            // 設置 a 標簽的跳轉路徑為 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手動觸發 a 標簽的點擊事件
            a.click()
            // 移除 a 標簽
            a.remove()
        })
    }
</script>
</html>

各內核和瀏覽器支持情況

Mozilla 程式從 Gecko 1.8 (Firefox 1.5 (en-US)) 開始支持 <canvas>。它首先是由 Apple 引入的，用於 OS X Dashboard 和 Safari。Internet Explorer 從 IE9 開始支持<canvas> ，更舊版本的 IE 中，頁面可以通過引入 Google 的 Explorer Canvas 項目中的腳本來獲得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>。

小程式中提示

在小程式中我們如果需呀實現的話，也是同樣的原理哦，只是我們需要將創建實例和上下文的Api進行修改，因為小程式中是沒有dom，既然沒有dom，哪來的操作dom這個操作呢。

本文轉載於:

https://juejin.cn/post/7174251833773752350

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql 隱式類型轉換規則
    規則： 1、兩個參數至少有一個是 NULL 時，比較的結果也是 NULL，例外是使用 <=> 對兩個 NULL 做比較時會返回 1，這兩種情況都不需要做類型轉換2、兩個參數都是字元串，會按照字元串來比較，不做類型轉換3、兩個參數都是整數，按照整數來比較，不做類型轉換4、十六進位的值和非數字做比較時， ...
  • ChunJun 順利晉級“2022 年中國開源創新大賽”決賽，並榮獲“優秀開源項目/社區”獎項
    日前，“2022年中國開源創新大賽”初賽晉級名單公佈，易用、穩定、高效的批流統一的數據集成框架 ChunJun 順利晉級決賽，並榮獲“2022年中國開源創新大賽優秀開源項目/社區”獎項。 感謝組委會專家的認可，ChunJun也將繼續秉承技術初心，砥礪前行，不遺餘力地助力國內開源發展，為更多的開發者傳 ...
  • 分散式資料庫架構路線大揭秘
    摘要：這些年大家都在談分散式資料庫，各大企業也紛紛開始做資料庫的分散式改造。那麼所謂的分散式資料庫是什麼？採用什麼架構，優勢在哪？為什麼越來越多企業選擇它？我們不妨一起來深入瞭解下。 本文分享自華為雲社區《GaussDB分散式架構大揭秘》，作者：華為雲資料庫首席架構師 馮柯。 這些年大家都在談分散式 ...
  • MySQL學習（一）---->SQL查詢執行流程
    MySQL查詢執行流程 架構總覽 下麵就是MySQL 的邏輯架構，sql layer主要負責如下功能：許可權判斷、sql解析、執行計劃優化、query cache的處理等操作，這些操作都是在資料庫系統處理底層數據之前的工作； Storage Engine Layer主要負責底層數據存取的實現，由多種存 ...
  • 深入理解 Taier：MR on Yarn 的實現原理
    我們今天常說的大數據技術，它的理論基礎來自於2003年 Google 發表的三篇論文，《The Google File System》、《MapReduce: Simplified Data Processing on Large Clusters》、《Bigtable: A Distributed ...
  • Oracle 查詢時報錯ORA-00923: FROM keyword not found where expected
    第一步就是安裝 為了節省資源，運行起來更快捷，首先是在電腦上安裝好vm虛擬機， 新建虛擬機，安裝xp,也就是把xp光碟文件導入， 接著在虛擬機中下載oracle，解壓的話會用到WinRAR，也一併導入虛擬機C盤 然後在主機上，安裝客戶端client，plsql, 打開虛擬機中的監聽，連接資料庫， 登 ...
  • 應用內支付服務現網、沙盒環境下常見關鍵事件的對比與總結
    在集成和調試訂閱型商品時，我們會依賴沙盒環境來進行模擬實際場景。 訂閱型商品的購買流程和一次性商品的購買流程類似，但訂閱還有其他細節場景，比如續訂成功或失敗，續訂周期時長等。沙盒環境下的訂閱續訂時間會比正常情況更快，引入“時光機”概念幫助您快速測試您應用的訂閱場景。比如訂閱周期為1周，商品在3分鐘後 ...
  • js 高頻面試題詳解
    一：js 中的變數提升 例1 a = 2; var a; console.log(a); 答：2 解析：它會將當前作用域的所有變數的聲明提升到程式的頂部，上述代碼等價為： var a; a = 2 console.log(a); // 2 例2： console.log(a);// undefine ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類