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