下面和大家分享一款神奇的 JavaScript 開源手寫簽名庫 —— Signature_Pad。它為網頁帶來便捷的手寫簽名體驗。用戶可輕松在瀏覽器上繪制個性化簽名，并支持多種格式導出，簡化了電子文檔的簽署流程。

Github Star: 10.6k^[1]

1. Signature_Pad 是什么？

Signature_Pad 允許用戶在網頁上進行絲滑的手寫簽名。設計理念是簡單易用，同時保持高度的定制性，滿足不同用戶的需求。通過 Signature_Pad 可以輕松地將手寫簽名功能集成到任何應用中，無論是在線合同簽署、電子表格提交，還是個性化的用戶交互體驗。支持觸摸和鼠標輸入，不同設備上都能提供流暢的簽名。Signature_Pad 還提供簽名的保存、加載和導出功能，支持SVG、PNG等格式。

2. 核心特點

Signature Pad 的核心特點：

1. 1. 基于 Canvas：使用 HTML5 的 canvas 元素進行繪圖，確保了良好的兼容性和性能。優化的算法和渲染技術，確保了即使在高分辨率設備上也能提供流暢的簽名體驗。

2. 2. 平滑的簽名體驗：采用可變寬度的 Bézier 曲線插值算法，提供類似于真實簽名的流暢體驗。

3. 3. 跨平臺兼容性：支持所有現代的桌面和移動瀏覽器，包括觸摸屏和非觸摸屏設備。基于 MT 許可證，允許商用。

4. 4. 數據序列化：簽名可以被序列化為 JSON 格式，便于在客戶端和服務器之間傳輸。

5. 5. 多種輸出格式：支持將簽名保存為多種格式，包括 PNG、JPEG 和 SVG。

3.快速開始

1. 安裝

使用 npm 或 yarn 安裝

npm install --save signature_pad

或者直接通過 CDN 進行引入，在 CDN JSDeliver^[2]

<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.2/dist/signature_pad.umd.min.js"></script>

2. 基本使用

在 HTML 中添加一個 <canvas> 元素，并設置 DOM 結構和樣式。

document.querySelector('#app').innerHTML = `
<div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
        <canvas id="signature-canvas"></canvas>
    </div>
    <div class="signature-pad--footer">
        <button type="button" class="buttonclear clear" id="clear" data-action="clear">重簽</button>
        <button type="button" class="buttonclear clear" id="save" data-action="clear">確定</button>
    </div>
</div>
`

初始化 Signature Pad

// 獲取容器
const canvas = document.getElementById('signature-canvas');
// 創建對象
const signaturePad = new SignaturePad(canvas, {
    backgroundColor: '#DEDEDE',
    penColor: 'rgb(0, 0, 0)'
});

屬性說明：

1. 1. penColor：設置簽名筆觸的顏色。默認是白色 (#fff)。

2. 2. backgroundColor：設置畫布的背景顏色。默認是黑色 (#000)。

3. 3. minWidth：設置簽名筆觸的最小寬度（以像素為單位）。默認是 0.5px。

4. 4. maxWidth：設置簽名筆觸的最大寬度（以像素為單位）。默認是 2.5px。

5. 5. minDistance：設置繪制時的最小距離（以像素為單位），即連續兩個點之間的最小距離。默認是 5px。

6. 6. dotSize：設置點的大小，影響在屏幕上點擊時留下的點的大小。

7. 7. velocityFilterWeight：根據速度控制線的寬度，這個參數決定了速度對筆觸寬度的影響程度。默認是 0.7。

3. 操作事件

示例代碼請公眾號回復 "demo" 獲取

應用場景

Signature Pad 可用于電子商務、在線合同簽署、醫療電子記錄、物流簽名捕獲、金融服務、教育作業、政府服務、藝術創作、法律文檔、移動應用和企業內部流程等多種場景，提供跨平臺的電子簽名解決方案。

總結

如果你正在尋找一款靈活、強大的在線簽名工具，我強烈推薦你試試 Signature Pad。不僅易于上手，適合快速構建原型，而且其定制能力也讓它成為構建復雜商業系統的理想選擇。