記錄--前端實現電子簽名（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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類