Saving a JSignature 1

[Marine1969]

I need to save a jsignature image where I found a script that works with tablets and phones to get the signature but I cannot get the save button to work. Does anyone have any suggestions? I have the code and the link to the script I found. Any help would be great. Thank you.

jsignature

<form action="rec_maint.php">
	   <input type="hidden" name="maint" value="cssig">
	   <input type="hidden" name="rec" value="edit">
	   <input type="hidden" name="sid" value="<?php echo $_GET['sid'];?>">
	   <div id="signatureparent">
         <div id="signature"></div>
         <button type="button" onclick="$('#signature').jSignature('clear')">Clear</button>
         <button type="button" id="btnSave">Save</button>
      </div>
      <input type="hidden" id="hiddenSigData" name="hiddenSigData" />
      <div id="scrollgrabber"></div>
      <script src="jsig/src/jSignature.js"></script>
      <script src="jsig/src/plugins/jSignature.CompressorBase30.js"></script>
      <script src="jsig/src/plugins/jSignature.CompressorSVG.js"></script>
      <script src="jsig/src/plugins/jSignature.UndoButton.js"></script> 
      <script>
         $(document).ready(function() {
         var $sigdiv = $("#signature").jSignature({'UndoButton':true});

         // -- i explain from here...
         $('#btnSave').click(function(){
            var sigData = $('#signature').jSignature('getData','base30');
            $('#hiddenSigData').val(sigData);
         });
        // -- ... to here.

        })
     </script>
	  </form>

 

[spamjim]

The only thing you have shared is the client side javascript. It takes PHP (or any other server side scripting) to do the saving. What's in "rec_maint.php"?

It looks like jsignature can record the drawn signatures as image/png;base64 or other text-based data that can be passed as PHP form data.

 

[Marine1969]

From the jsignature page...

1. "when the button with the id 'btnSave' is clicked"...
2. Convert the signature canvas to a bas64 encoded string, and save it in a variable called 'sigData'.
3. Set the value of the field with id 'hiddenSigData' to variable 'sigData'.

rec_maint.php is where I do all my db maintenance. Currently the button does not do submit.

 

[vacunita]

Nowhere do the steps you mentioned or were explained in the stackoverflow post you linked to ever mention the code is supposed to submit the form.
All your code is doing now, is storing the signature data as a string in a hidden field in your form.

You still need to submit the form normally to get that data over to your PHP script.

So you either add a regular submit button like with any other form (<input type="submit"...) or you add a JS call to your saving procedure to automatically submit the form when that button is clicked. This HTML forms 101.







----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[Marine1969]

It's the simple things! I did not notice that the button was not a submit. Although that did not solve all the issues. I tried to echo $_POST['sigData'] and I get...

This page isn’t working

localhost is currently unable to handle this request


My understanding here is that sidData holds an image. Is it possible to echo an image?

 

[vacunita]

sigData would be holding a binary data stream so to speak.

You can echo it out, and it will just show up as a bunch of characters, not an image.

Your server may not be able to handle it raw though.

The demo page for jsignature has an example of the output:

https://willowsystems.github.io/jSignature/#/demo/

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[Marine1969]

I saw that. On the jsignature link the guy claims it saved to the database and he was able to pull it up. I tried to echo sigData and got the generic 500 error, even with errors turned on.

 

[vacunita]

Does it work if you submit a form without the signature?

i.e Does PHP work normally? Or does it also issue a server error?

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[Marine1969]

Yes it works. I am able to print echo all the other fields.

 

[vacunita]

That's strange. Something about the signature data output is not sitting well with your server. Not much to do there, other than verify server settings.

Can you maybe try just echoing the variable's length instead of the entire variable?

echo strlen($sigData);



----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[Marine1969]

I echo the hiddenSigData and got this...

image/jsignature;base30,5B2000045i99997665644020188984756_3QZm8977Y4ak997520300Z2dc898Y5762100Z2_fw4577797d5221222137777520000000_2w68ffdf99Z36456567Ycddfb5Z469c6988_kx375bddcb67410016bffffb954212225746_5J200Z355554465664Y2bfdb722Z23645777823

The 'signature' field in the db is a varchar(500). I am getting this error...

"Fatal error: Uncaught Error: Call to a member function bindParam() on boolean"

$str=$conn->prepare("Update cservice Set signature = :sig");
$stmt = $conn->prepare($str);
$stmt->bindParam(':sig', $_POST['hiddenSigData'], PDO::PARAM_STR);  
$stmt->execute();

 

[spamjim]

It smells like you need a larger field in the table (<500, or of undefined length).

 

[Marine1969]

The error is in the binding where it says it expects a string.

 

[spamjim]

I wasn't referring to the named error. I was just observing that you're not allowing much space for that data.

As the drawn image is more detailed/complex, you will need to store a longer string.

From the jSignature github page (

https://github.com/brinley/jSignature):

"This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures."

Even the author of this plugin suggests you might offer 4x the storage space. I just scribbled my signature in the demo to produce 775 characters in the string.
(

http://www.unbolt.net/jSignature/)

 

[Marine1969]

I changed the field type to a blob (something I read in a forum) but still did not save.

 

[vacunita]

The bindParam error refers to the fact that $conn->prepare($str) is returning a boolean value, likely false, instead of an object that would have a method called bindParam.

Your prepare statement is as such likely failing. You need to find out why its failing. Depending on what DB library you are using you need to use the relevant error method to get the error back.

http://php.net/manual/en/pdo.prepare.php

If the database server successfully prepares the statement, PDO:repare() returns a PDOStatement object. If the database server cannot successfully prepare the statement, PDO:repare() returns FALSE or emits PDOException (depending on error handling).

http://php.net/manual/en/mysqli.prepare.php

mysqli_prepare() returns a statement object or FALSE if an error occurred.




----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[Marine1969]

I am using PDO and currently have the "signature" field set to blob. Here is what the page displays where is it supposed to save...

Warning: PDO::prepare() expects parameter 1 to be string, object given in ///rec_maint.php on line 679

Fatal error: Uncaught Error: Call to a member function bindParam() on boolean in ///rec_maint.php:680 Stack trace: #0 {main} thrown in...webpage

 

[ChrisHirst]

I am using PDO and currently have the "signature" field set to blob

A Binary Large OBject (blob) is not a string value;

Hence

expects parameter 1 to be string

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[Marine1969]

I tried having it as a string, some websites I found said to set it to blob. Im literally pulling at strings here (get it, strings? ). I just want to save this thing so I can move on.

 

[ChrisHirst]

some websites I found said to set it to blob

Yeah, but this is your SQL query that is throwing the error, so your column needs to be a text type OR your query needs to expect a BLOB, deciding what to present to any particular website is an entirely different issue.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.