Canvas系列-签字功能

前端

2023-09-15 12:17:10

好久没有分享文章了，由于刚换了一份工作去了鹅厂，每天忙于七七八八的事情，近些天也终于算是稳定了下来，就分享一下近段时间工作中遇到的一些可能对大家有用的小玩意儿。

最近项目中做了一个签字功能，需要在网页上实现电子签名，可以保存为图片或者直接打印出来。我们项目是纯前端项目，后端不参与签字的功能实现，因此我只能在前端自己实现这个功能。

一开始我是想用canvas来实现的，但是发现canvas本身并不支持签字功能。于是我就想到了一个办法，可以在canvas上画一个透明的矩形，然后在矩形里面画签名，这样就可以实现签字功能了。

说干就干，我开始在canvas上画一个透明的矩形，然后在矩形里面画签名。但是发现了一个问题，就是签名不能保存为图片或者直接打印出来。

后来我发现，canvas本身并不支持保存为图片或者直接打印出来，需要借助其他工具才行。于是，我找到了一个叫html2canvas的库，这个库可以将canvas的内容保存为图片或者直接打印出来。

有了这个库之后，我就可以在canvas上画签名，然后用html2canvas库将canvas的内容保存为图片或者直接打印出来了。

整个过程非常简单，只需要几行代码就可以实现。

<canvas id="canvas" width="300" height="200"></canvas>

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

  // 在canvas上画一个透明的矩形
  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  ctx.fillRect(0, 0, 300, 200);

  // 在矩形里面画签名
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(290, 190);
  ctx.stroke();

  // 使用html2canvas库将canvas的内容保存为图片
  html2canvas(canvas).then(function(canvas) {
    var img = canvas.toDataURL('image/png');
    // 保存图片到本地
    window.location.href = img;
  });
</script>