前端签字功能实现

前端签字功能实现

在一些业务场景中，如电子签约、收货确认等功能需要用户在前端进行手写签字。

HTML + Canvas 实现签字功能

以下为基本实现示例：

<canvas id="signature" width="500" height="200" style="border:1px solid #000"></canvas>
<button onclick="clearCanvas()">清除</button>

<script>
  let canvas = document.getElementById('signature');
  let ctx = canvas.getContext('2d');
  let drawing = false;

  canvas.onmousedown = () => drawing = true;
  canvas.onmouseup = () => drawing = false;
  canvas.onmousemove = (e) => {
    if (!drawing) return;
    let x = e.offsetX, y = e.offsetY;
    ctx.lineTo(x, y);
    ctx.stroke();
  };

  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
</script>

后端处理签名

签名可通过 canvas.toDataURL() 转为 Base64 图片上传至服务器，Java 后端接收并解析。

byte[] imageBytes = Base64.getDecoder().decode(base64Str.split(",")[1]);
Files.write(Paths.get("signature.png"), imageBytes);