当前位置：首页 > JavaScript

js 实现签名

2026-03-13 17:25:20JavaScript

使用原生 JavaScript 实现签名

在 JavaScript 中实现签名功能通常涉及绘制签名到画布（Canvas）并保存为图像数据。以下是一个基础实现示例：

// 获取 Canvas 元素和上下文
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

// 鼠标/触摸事件监听
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDrawing);
canvas.addEventListener('mouseout', endDrawing);

// 触摸设备支持
canvas.addEventListener('touchstart', handleTouch);
canvas.addEventListener('touchmove', handleTouch);
canvas.addEventListener('touchend', endDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX || e.touches[0].clientX) - rect.left;
    const y = (e.clientY || e.touches[0].clientY) - rect.top;

    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
}

function endDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

function handleTouch(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent(
        e.type === 'touchstart' ? 'mousedown' : 'mousemove',
        { clientX: touch.clientX, clientY: touch.clientY }
    );
    canvas.dispatchEvent(mouseEvent);
}

// 保存签名为图像
function saveSignature() {
    const imageData = canvas.toDataURL('image/png');
    console.log(imageData); // 可上传至服务器或保存
}

// 清除签名
function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

使用第三方库简化实现

对于更复杂的需求，可以使用现成的签名库如 Signature Pad：

安装库：
```
npm install signature_pad
```

实现代码：


import SignaturePad from 'signature_pad';

const canvas = document.getElementById('signatureCanvas'); const signaturePad = new SignaturePad(canvas);

// 调整线条样式 signaturePad.penColor = 'rgb(0, 0, 0)'; signaturePad.minWidth = 1; signaturePad.maxWidth = 3;

// 保存签名 function saveSignature() { if (signaturePad.isEmpty()) { alert('请先签名'); return; } const dataURL = signaturePad.toDataURL(); // PNG格式 console.log(dataURL); }

// 清除签名 function clearSignature() { signaturePad.clear(); }

js 实现签名


### 服务端签名验证（示例）

如需将签名发送至服务端验证（如 Node.js + Express）：

```javascript
const express = require('express');
const app = express();
app.use(express.json());

app.post('/verify-signature', (req, res) => {
    const { signatureData } = req.body;
    // 此处可添加验证逻辑（如图像分析）
    res.json({ valid: true });
});

app.listen(3000);