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.

/

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.

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.

• php
• javascript

• In php you've got a few alternatives for capturing data. Most mon is POST, GET and Cookies, you can use javascript to provie the data for any of those. – Iesus Sonesson Commented Aug 17, 2013 at 1:04
• @lesus Sonesson, can you show me an example by answering this question. I'm currently using POST, but I need to assign a name / $variable first to capture it. – user2581346 Commented Aug 17, 2013 at 1:10
• It's Easy; the posted variable resides in: $_POST['NameOfYourPostField'] or $_REQUEST['this works for both gets posts and cookies'] take a look here: php/manual/en/reserved.variables.post.php – Iesus Sonesson Commented Aug 17, 2013 at 1:13

5 Answers 5

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 of Szimek'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...

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.

To properly answer your question.

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

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.

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.