How to capture Szimek / Signature_Pad with PHP (Capturing Javascript in a PHP variable)?

Question

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

I researched, and I'm still stunned by how to capture a DATA URI into a variable.

http://szimek.imtqy.com/signature_pad/

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

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

Answer 1

To correctly answer your question.

You can return the post variable in PHP using $_POST or $_REQUEST http://www.php.net/manual/en/reserved.variables.request.php

Answer 2

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

Here is what I did.

At first I added hidden input because I included it in the form:

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

Then you can save the uri image of the data into this input value, and it will be saved in the form.

I added this in JS to add uri data 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 cleanup button with input.value = ''; to erase the field:

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

This is based on the Szimek demo code .

Another option for sending data to your php would be to use an ajax request, which is pretty simple using jQuery $ .ajax or $ .post.

This script is surprisingly easy to use ...

Answer 3

I also used the Szimek demo code as the basis of my solution. I had problems with Jake's approach when using the iPad, so I got a little more involved in the demo code.

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

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

Then I added the following var definitions and this change for the saveButton listener in the app.js demo file:

 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 process the results in PHP, I used this:

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

It did the trick.

Answer 4

I use 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 "mydate" to save it in a folder or in mysql.