html实现电子签名 -20241014

电子签名

1. 基本实现

ElectronicSignature/index.tsx

// ElectronicSignature/index.tsx
import './index.css';

function ElectronicSignature() {
  window.onload = function () {
    const canvas = document.getElementById(
      'signatureCanvas',
    ) as HTMLCanvasElement;
    const ctx = canvas.getContext('2d');
    const clearButton = document.getElementById('clearButton') as HTMLElement;
    const saveButton = document.getElementById('saveButton') as HTMLElement;

    let drawing = false;
    let lastX = 0;
    let lastY = 0;

    canvas.addEventListener('mousedown', (e) => {
      drawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });

    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => (drawing = false));
    canvas.addEventListener('mouseout', () => (drawing = false));

    function draw(e) {
      if (!drawing || !ctx) return;
      ctx.strokeStyle = '#000';
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.lineWidth = 2;

      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [lastX, lastY] = [e.offsetX, e.offsetY];
    }

    clearButton.addEventListener('click', () => {
      if (!ctx) {
        return;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });

    saveButton.addEventListener('click', () => {
      const dataURL = canvas.toDataURL('image/png');
      console.dir('canvas', canvas);
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'signature.png';
      link.click();
    });
  };

  return (
    <div>
      <div className="canvas-container">
        <canvas id="signatureCanvas" width="600" height="400"></canvas>
      </div>
      <div className="controls">
        <button id="clearButton">Clear</button>
        <button id="saveButton">Save</button>
      </div>
    </div>
  );
}

export default ElectronicSignature;

2. css文件

.canvas-container {
  border: 1px solid #000;
  position: relative;
}
.canvas-container canvas {
  display: block;
}
.controls {
  margin-top: 10px;
}

3.最终效果

image.png