Создайте HTML-форму с цифровой / электронной подписью, используя php

Question

Я ищу решение добавить подпись в форму. Тот, где кто-то может подписать с помощью мыши или пальца на сенсорном устройстве. Мне интересно, могу ли я использовать что-то вроде jSignature https://willowsystems.github.io/jSignature/ для создания изображения, обработайте форму с помощью ph p и создайте PDF, а затем добавьте изображение в PDF,

Я немного исследовал и не нашел четкого решения для этого. По сути, я хочу создать простой контракт на сайте для фрилансера, который клиенты будут подписывать онлайн.

Answer 1

Я создал довольно минимальный прототип, использующий <canvas>элемент, позволяющий подписывать рисунки. Затем этот рисунок добавляется в форму как URL-адрес base64.

Краткое объяснение кода:

• Создать <canvas> элемент
• Определите события для mousedown (карандаш вниз), mousemove (продолжить рисование) и mouseup (карандаш вверх)
• Нарисуйте на холсте, создав линию между предыдущими и текущими координатами. Обратите внимание, что если вы нарисуете много точек на текущей координате, вы не получите плавную линию при быстром перемещении с помощью мыши.
• Когда вы прекращаете рисовать, мы получаем содержимое холста в виде изображения, используя 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() {
  drawing = true;
}

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

function draw(e) {
  if (!drawing) {
    return;
  }
  currX = e.clientX - canvas.offsetLeft;
  currY = e.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);

Answer 2

Tnx так много! Вместо canvas.offsetLeft и offsetTop я исправил смещение на;

              var rect = canvas.getBoundingClientRect();
        var xoff = rect.left;
        var yoff = rect.top;