signature_pad 是一个轻量级的 JavaScript 库，用于在网页上实现手写签名功能。这个库特别适合需要捕获用户手写签名的应用场景，如在线合同签署、用户注册等。它使用 Canvas API 绘制手写签名，因此可以在各种现代浏览器上运行良好。同时，signature_pad 可以方便地将签名数据导出为图像格式。
一、安装与引入
首先，你需要通过 NPM 或直接引入 CDN 方式来使用 signature_pad。以下是使用 CDN 的方式：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Pad 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.8.0/signature_pad.min.js"></script>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="signature-pad" width="400" height="200"></canvas>
<button id="clear">清除</button>
<button id="save">保存</button>
<img id="signature-image" style="display:none;"/>
<script>
// 初始化 signature_pad
const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas);
// 清除按钮事件
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
// 保存按钮事件
document.getElementById('save').addEventListener('click', function () {
if (signaturePad.isEmpty()) {
alert("请先签名！");
} else {
const dataUrl = signaturePad.toDataURL(); // 获取签名图像数据
document.getElementById('signature-image').src = dataUrl; // 显示签名图像
document.getElementById('signature-image').style.display = 'block';
}
});
</script>
</body>
</html>
二、功能详解
上面的代码展示了如何快速创建一个简单的手写签名板。下面是对代码中各部分的详细说明：
-
HTML 结构:
<canvas>元素用于绘制手写签名。<button>元素用于提供清除和保存签名的功能。<img>元素用于显示保存的签名图像。
-
JavaScript 逻辑:
- 使用
SignaturePad类创建一个signaturePad实例，并将其与 Canvas 关联。 - 清除按钮的事件监听器调用
signaturePad.clear()方法以清空当前的签名。 - 保存按钮的事件监听器检查签名板是否为空，如果不为空，则通过
toDataURL()方法获取签名的图像数据并在页面上显示。
- 使用
三、常用方法
- clear(): 清除当前签名内容。
- toDataURL(): 返回包含当前签名的图像数据URL，支持 PNG 格式。
- isEmpty(): 检查当前签名板是否为空，返回布尔值。
- fromDataURL(dataUrl): 从给定的图像数据URL恢复签名。
四、扩展功能
signature_pad 支持多种自定义选项，例如设置绘制的颜色、宽度等。可以使用如下方式进行设置：
const signaturePad = new SignaturePad(canvas, {
penColor: "rgb(0, 0, 0)", // 设置签名颜色
minWidth: 0.5, // 最小宽度
maxWidth: 2.5 // 最大宽度
});
以上是对 signature_pad 库的简要介绍和使用示例。通过这个库，开发者可以方便地实现手写签名功能，并在需要时以图像形式保存其数据。希望这篇文章对你理解和使用 signature_pad 库有所帮助！
