下面和大家分享一款神奇的 JavaScript 開源手寫簽名庫 —— Signature_Pad。它為網(wǎng)頁帶來便捷的手寫簽名體驗。用戶可輕松在瀏覽器上繪制個性化簽名，并支持多種格式導(dǎo)出，簡化了電子文檔的簽署流程。
Github Star: 10.6k[1]
1. Signature_Pad 是什么？
Signature_Pad 允許用戶在網(wǎng)頁上進行絲滑的手寫簽名。設(shè)計理念是簡單易用，同時保持高度的定制性，滿足不同用戶的需求。通過 Signature_Pad 可以輕松地將手寫簽名功能集成到任何應(yīng)用中，無論是在線合同簽署、電子表格提交，還是個性化的用戶交互體驗。支持觸摸和鼠標(biāo)輸入，不同設(shè)備上都能提供流暢的簽名。Signature_Pad 還提供簽名的保存、加載和導(dǎo)出功能，支持SVG、PNG等格式。
2. 核心特點
Signature Pad 的核心特點：
1. 基于 Canvas：使用 HTML5 的 canvas 元素進行繪圖，確保了良好的兼容性和性能。優(yōu)化的算法和渲染技術(shù)，確保了即使在高分辨率設(shè)備上也能提供流暢的簽名體驗。
2. 平滑的簽名體驗：采用可變寬度的 Bézier 曲線插值算法，提供類似于真實簽名的流暢體驗。
3. 跨平臺兼容性：支持所有現(xiàn)代的桌面和移動瀏覽器，包括觸摸屏和非觸摸屏設(shè)備?；?MT 許可證，允許商用。
4. 數(shù)據(jù)序列化：簽名可以被序列化為 JSON 格式，便于在客戶端和服務(wù)器之間傳輸。
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> 元素，并設(shè)置 DOM 結(jié)構(gòu)和樣式。
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');
// 創(chuàng)建對象
const signaturePad = new SignaturePad(canvas, {
backgroundColor: '#DEDEDE',
penColor: 'rgb(0, 0, 0)'
});
屬性說明：
1. penColor：設(shè)置簽名筆觸的顏色。默認是白色 (#fff)。
2. backgroundColor：設(shè)置畫布的背景顏色。默認是黑色 (#000)。
3. minWidth：設(shè)置簽名筆觸的最小寬度（以像素為單位）。默認是 0.5px。
4. maxWidth：設(shè)置簽名筆觸的最大寬度（以像素為單位）。默認是 2.5px。
5. minDistance：設(shè)置繪制時的最小距離（以像素為單位），即連續(xù)兩個點之間的最小距離。默認是 5px。
6. dotSize：設(shè)置點的大小，影響在屏幕上點擊時留下的點的大小。
7. velocityFilterWeight：根據(jù)速度控制線的寬度，這個參數(shù)決定了速度對筆觸寬度的影響程度。默認是 0.7。
3. 操作事件
示例代碼請公眾號回復(fù) "demo" 獲取
應(yīng)用場景
Signature Pad 可用于電子商務(wù)、在線合同簽署、醫(yī)療電子記錄、物流簽名捕獲、金融服務(wù)、教育作業(yè)、政府服務(wù)、藝術(shù)創(chuàng)作、法律文檔、移動應(yīng)用和企業(yè)內(nèi)部流程等多種場景，提供跨平臺的電子簽名解決方案。
總結(jié)
如果你正在尋找一款靈活、強大的在線簽名工具，我強烈推薦你試試 Signature Pad。不僅易于上手，適合快速構(gòu)建原型，而且其定制能力也讓它成為構(gòu)建復(fù)雜商業(yè)系統(tǒng)的理想選擇。
該文章在 2024/10/12 10:22:53 編輯過
400 186 1886
