4

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

我进行了研究，但我仍然对如何将 DATA URI 捕获到变量中感到目瞪口呆。

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

我想像这样捕获它， Javascript$inputESignature = signaturePad.toDataURL()在哪里。signaturePad.toDataURL()

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

4

5 回答 5

2

对于需要朝正确方向推动并发现 $_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 的演示代码。

将数据发布到 php 的另一种选择是使用 ajax 请求，这对于 jQuery 的 $.ajax 或 $.post 来说非常简单。

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

于 2013-09-05T00:02:21.500 回答
1

我还使用 Szimek 的演示代码作为我的解决方案的基础。在使用 iPad 时，我对 Jake 的方法有些麻烦，所以我对演示代码的干预更少。

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

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

然后，我在演示 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']));
}

这成功了。

于 2014-02-24T21:31:10.623 回答
0

正确回答您的问题。

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

于 2013-08-17T01:17:12.957 回答
0

我正在使用此脚本以 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=""/>

使用“mydate”将其存储在文件夹或mysql中。

于 2016-09-02T02:45:18.633 回答
0

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

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



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

我在这方面很挣扎，因为我不擅长 JavaScript。经过几个小时的使用这段代码后，我终于弄明白了。我挂断了隐藏字段没有提交按钮的 html 表单。然后我意识到javascript正在使用保存按钮提交表单。希望这对其他人有帮助。

于 2020-07-01T16:34:15.113 回答