Question

我正在浏览StackOverflow并遇到Szimek / Signature_Pad使用Javascript捕获电子/数字签名。

我研究过，我仍然对如何将DATA URI捕获到变量中感到茫然。

http://szimek.github.io/signature_pad/

我希望像$inputESignature = signaturePad.toDataURL()一样捕获它，其中signaturePad.toDataURL()是Javascript。

如果需要澄清，请告诉我。对不起，如果我的请求有点模糊。

Answer 1

对于需要推进正确方向的其他用户，发现$ _POST或$ _REQUEST非常含糊......

这就是我所做的。

首先我添加了一个隐藏的输入，因为我将其整合到一个表单中：

<input type="hidden" name="input_name" value="" />

然后你可以将数据uri图像存储到该输入的值中，它将与表格一起存储。

我将此添加到JS中以将数据uri添加到表单中：

var input = wrapper.querySelector("input");

canvas.addEventListener("mouseup", function(event) {
    if ( signaturePad.isEmpty() ) {
        input.value = '';
    } else {
        input.value = signaturePad.toDataURL();
    }
});

然后使用input.value = '';更新清除按钮以擦除字段：

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
    input.value = '';
});

这是基于Szimek's demo code。

将数据发布到php的另一个选择是使用ajax请求，使用jQuery的$ .ajax或$ .post非常容易。

这个脚本非常容易使用...

Answer 2

我还使用Szimek的演示代码作为我的解决方案的基础。我在使用iPad时使用Jake的方法遇到了一些麻烦，因此我对演示代码的干预更少。

我还添加了一个HTML表单，但我的表单没有按钮，它只是有不可见的输入元素：

<form id="sigform" action="myscript.php" method="post">
    <input id="siginput" type="hidden" name="sig" value="" />
</form>

然后我在demo app.js代码中将以下var定义和此更改添加到saveButton侦听器：

var form = document.getElementById("sigform"),
    input = document.getElementById("siginput")

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        input.value = signaturePad.toDataURL();
        form.submit();
    }
}

最后，为了处理PHP中的结果，我使用了这个：

if ( $_POST['sig'] ) {
    file_put_contents("myfile.png", file_get_contents($_POST['sig']));
}

这就是诀窍。

Answer 3

正确回答你的问题。

您可以使用$_POST或$_REQUEST在PHP中检索帖子变量 http://www.php.net/manual/en/reserved.variables.request.php

Answer 4

我使用此脚本以php格式回显结果。

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
      var image = signaturePad.toDataURL(); // data:image/png....
     document.getElementById('mydata').value = image;
     document.getElementById('results').innerHTML = '<img src="'+image+'"/>';
    }
});

HTML

   <div id="results"><b>Preview:</b></div>
   <input id="mydata" type="hidden" name="mydata" value=""/>

使用＆＃34; mydate＆＃34;将它存储在文件夹或mysql中。

Answer 5

我想补充一点，您还必须将以下代码添加到app.js文件的顶部，以使EFC解决方案起作用。另外，必须创建一个具有相同数据操作的新按钮。

var saveButton = wrapper.querySelector("[data-action=save]");



<button type="button" class="button save" data-action="save">Save</button>

由于我不擅长JavaScript，因此我为此感到困惑。经过数小时的处理，我终于弄明白了。我挂在html表单上，隐藏字段没有提交按钮。然后我意识到javascript正在使用“保存”按钮提交表单。希望这对其他人有帮助。

如何使用PHP捕获Szimek / Signature_Pad（将Javascript捕获到PHP变量中）？

5 个答案: