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

Question

I was browsing StackOverflow and came across Szimek/Signature_Pad to capture electronic / digital signatures using Javascript.

I researched and I'm still dumbfounded on how to capture the DATA URI into a variable.

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

I want to capture it like this $inputESignature = signaturePad.toDataURL() , where signaturePad.toDataURL() is Javascript.

If clarification is needed, please let me know. Sorry if my request is a bit vague.

Answer 1

For other users who need a push in the right direction and found $_POST or $_REQUEST to be extremely vague...

Here is what I did.

First I added a hidden input, because I integrated this into a form:

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

Then you can store the data uri image into that input's value and it will get stored with the form.

I added this to the JS to add the data uri to the form:

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

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

And then update the clear button with input.value = '';to wipe the field:

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

This is based off ofSzimek's demo code .

Another option for posting the data to your php would be to use an ajax request which is pretty easy with jQuery's $.ajax or $.post.

This script is surprisingly easy to use...

Answer 2

I also used Szimek's demo code as the foundation of my solution. I had some trouble with Jake's approach when using an iPad, so I intervened even less with the demo code.

I also added an HTML form, but my form has no buttons, it simply has the invisible input element:

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

I then added the following var definitions and this change to the saveButton listener in the demo app.js code:

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();
    }
}

And finally, to handle the results in PHP I used this:

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

This did the trick.

Answer 3

To properly answer your question.

You may retreive a post variable in PHP with $_POST or $_REQUEST http://www.php.net/manual/en/reserved.variables.request.php

Answer 4

I'm using this script to echo the result in php form.

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=""/>

use the "mydate" to store it in folder or in mysql.

Answer 5

I'd like to add that you must also add the following code to the top of the app.js file for EFC's solution to work. Also, must create a new button with the same data-action.

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



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

I struggled with this since I'm not strong in JavaScripting. I finally figured it out after several hours of working with this code. I got hung up on the html form with the hidden field not having a submit button. Then I realized the javascript was submitting the form with the save button. Hope this helps someone else.