9

我正在寻找一种将签名添加到表单的解决方案。有人可以用鼠标或手指在触摸设备上签名的地方。我想知道是否可以使用 jSignature https://willowsystems.github.io/jSignature/#/about/之类的东西来创建图像，使用 php 处理表单并创建 PDF，然后将图像添加到 PDF .

我进行了一些研究，但没有找到明确的解决方案。基本上我想创建一个简单的自由职业者网站合同，客户将在线签署。

4

1 回答 1

12

我创建了一个相当小的原型，它使用该<canvas>元素来允许签名绘图。然后将此绘图作为 base64 url​​ 添加到表单中。

代码的简短说明：

  • 创建一个<canvas>元素
  • mousedown为(pencil down)、mousemove(continue drawing) 和mouseup(pencil up)定义事件
  • 通过在先前坐标和当前坐标之间创建一条线在画布上绘制。请注意，如果您要在当前坐标上绘制很多点，则在使用鼠标快速移动时将无法获得平滑的线条。
  • 当您停止绘图时，我们使用canvas.toDataUrl(). 然后将其设置在表单上的隐藏输入上。

var canvas = document.getElementById('signature');
var ctx = canvas.getContext("2d");
var drawing = false;
var prevX, prevY;
var currX, currY;
var signature = document.getElementsByName('signature')[0];

canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stop);
canvas.addEventListener("mousedown", start);

function start(e) {
  drawing = true;
}

function stop() {
  drawing = false;
  prevX = prevY = null;
  signature.value = canvas.toDataURL();
}

function draw(e) {
  if (!drawing) {
    return;
  }
  // Test for touchmove event, this requires another property.
  var clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
  var clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
  currX = clientX - canvas.offsetLeft;
  currY = clientY - canvas.offsetTop;
  if (!prevX && !prevY) {
    prevX = currX;
    prevY = currY;
  }

  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.closePath();

  prevX = currX;
  prevY = currY;
}

function onSubmit(e) {
  console.log({
    'name': document.getElementsByName('name')[0].value,
    'signature': signature.value,
  });
  return false;
}
canvas#signature {
  border: 2px solid black;
}

form>* {
  margin: 10px;
}
<form action="submit.php" onsubmit="return onSubmit(this)" method="post">
  <div>
    <input name="name" placeholder="Your name" required />
  </div>
  <div>
    <canvas id="signature" width="300" height="100"></canvas>
  </div>
  <div>
    <input type="hidden" name="signature" />
  </div>
  <button type="submit">Send</button>
  <form>

在 PHP 方面，您应该能够解码该 base64 字符串并将其保存到如下文件中：

$img = $_POST['signature'];
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $img));
file_put_contents('storage/signature.png', $data);

移动触摸事件的注意事项

如果您需要移动/触摸功能，只需将事件更改为：

  • mousemove：touchmove
  • mouseup：touchend
  • mousedown：touchstart

如果您需要移动和鼠标输入，您可以复制 3addEventListener行，以便跟踪所有 6 个事件。

于 2020-03-30T18:15:44.130 回答