我正在寻找一种向表单添加签名的解决方案。有人可以用鼠标或手指在触摸设备上签名的地方。我想知道是否可以使用jSignature https://willowsystems.github.io/jSignature/#/about/之类的东西来创建图像,用php处理表单并创建PDF,然后将图像添加到PDF。
我研究了一下,还没有找到明确的解决方案。基本上,我想创建一个简单的自由职业者网站合同,客户可以在线签署该合同。
我创建了一个相当小的原型,该原型使用<canvas>
元素来允许签名绘图。然后将此图形作为base64 url添加到表单中。
代码的简短说明:
<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);