前端实现电子签名(web、移动端)通用的实战过程

前端实现电子签名是一个比较复杂的过程，本文将以通用的实战过程进行详细讲解，主要包含以下几个步骤：

前端实现电子签名是一个比较复杂的过程，本文将以通用的实战过程进行详细讲解，主要包含以下几个步骤：

1. 获取签名
2. 处理签名数据
3. 在页面上绘制签名
4. 将签名保存并上传到服务器

1. 获取签名

获取签名有多种方式，常见的包括手写、鼠标绘制、触摸屏绘制等。本文以鼠标绘制为例进行讲解。

在页面上添加一个画布元素，并使用JavaScript获取该元素的上下文对象：

<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
</script>

绑定鼠标绘制事件：

var isDrawing = false;
var lastX, lastY;
canvas.addEventListener("mousedown", function(e) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mousemove", function(e) {
  if(!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mouseup", function() {
  isDrawing = false;
});

这样操作后，我们就可以使用鼠标在画布上绘制签名了。

2. 处理签名数据

我们需要将绘制的签名数据转换为一个图像数据，常用的格式有PNG、JPEG等。本文以PNG格式为例。

通过canvas对象的toDataURL方法，可以将画布中的内容转换为DataURL格式的字符串。

var signatureData = canvas.toDataURL("image/png");

3. 在页面上绘制签名

将步骤2中处理得到的签名数据，插入到HTML中作为一张图片。可以通过同样的canvas元素，将其DataURL设置为图片的source。

var img = new Image();
img.src = signatureData;
document.body.appendChild(img);

这样，签名就可以在页面上展示了。

4. 将签名保存并上传到服务器

将签名保存成文件可以通过使用XMLHttpRequest上传至服务器，也可以使用form表单的提交进行上传。

在使用XMLHttpRequest上传时，需要先将DataURL编码和处理：

var data = new FormData();
data.append('signature', signatureData.replace(/^data:image\/(png|jpeg);base64,/, ""));

接下来就可以通过AJAX的方式将签名上传至服务器了。

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload-signature");
xhr.send(data);

注：本文中的所有代码均为示例代码，需加以改进和完善。

示例1：电子签名的前端实现Demo

示例2：Electron客户端应用 之 电子签名系统