返回

电子签名生成——canvas签名功能实现

前端

电子签名功能是一个非常实用的功能，在很多场景中都有应用，比如在线合同的签订、电子发票的签收等等。本文将介绍如何使用 canvas 来实现简单的电子签名功能。

1. 创建签名区域

首先，我们需要创建一个签名区域。这个区域可以是一个 div、一个 canvas，或者其他任何可以容纳用户签名的元素。为了方便起见，我们这里使用一个 canvas 元素。

<canvas id="signature" width="300" height="100"></canvas>

2. 监听用户的签名事件

接下来，我们需要监听用户的签名事件。当用户在签名区域内签名时，我们会触发这个事件。

const signature = document.getElementById('signature');
signature.addEventListener('mousedown', startSigning);
signature.addEventListener('mousemove', moveSigning);
signature.addEventListener('mouseup', endSigning);

3. 处理用户的签名事件

当用户触发签名事件时，我们需要处理这些事件。在 startSigning 函数中，我们需要获取用户的签名起始坐标。在 moveSigning 函数中，我们需要获取用户的签名移动坐标。在 endSigning 函数中，我们需要获取用户的签名结束坐标。

let isSigning = false;
let startX, startY;

function startSigning(e) {
  isSigning = true;
  startX = e.clientX - signature.offsetLeft;
  startY = e.clientY - signature.offsetTop;
}

function moveSigning(e) {
  if (!isSigning) {
    return;
  }

  const x = e.clientX - signature.offsetLeft;
  const y = e.clientY - signature.offsetTop;

  // 绘制签名
  const ctx = signature.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(x, y);
  ctx.stroke();

  // 更新签名起始坐标
  startX = x;
  startY = y;
}

function endSigning() {
  isSigning = false;
}

4. 将签名字符串保存为图片或数据

当用户完成签名后，我们需要将签名字符串保存为图片或数据。我们可以使用 toDataURL() 方法来将 canvas 元素转换为图片。

const signatureData = signature.toDataURL();

我们也可以使用 getImageData() 方法来获取 canvas 元素的像素数据。

const signatureData = signature.getImageData(0, 0, signature.width, signature.height);

将签名字符串保存为图片或数据后，我们就可以将其发送给服务器，或者以其他方式进行存储。

总结

通过本文，我们学习了如何使用 canvas 来实现简单的电子签名功能。这个功能可以用于各种场景，例如业务员做申请提交时要签名，客户在平板电脑上签收货物时要签名，等等。