×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Saving a JSignature

Saving a JSignature

Saving a JSignature

(OP)
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

CODE --> php

<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> 

RE: Saving a JSignature

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.

RE: Saving a JSignature

(OP)
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.

RE: Saving a JSignature

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

RE: Saving a JSignature

(OP)
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?

RE: Saving a JSignature

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

RE: Saving a JSignature

(OP)
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.

RE: Saving a JSignature

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

RE: Saving a JSignature

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

RE: Saving a JSignature

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

RE: Saving a JSignature

(OP)
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"

CODE --> php

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

RE: Saving a JSignature

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

RE: Saving a JSignature

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

RE: Saving a JSignature

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/)

RE: Saving a JSignature

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

RE: Saving a JSignature

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::prepare() returns a PDOStatement object. If the database server cannot successfully prepare the statement, PDO::prepare() 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

RE: Saving a JSignature

(OP)
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...

CODE --> php

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 

RE: Saving a JSignature

Quote:

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

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

Hence

Quote:

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.

RE: Saving a JSignature

(OP)
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? upsidedown). I just want to save this thing so I can move on.

RE: Saving a JSignature

Quote:

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.

RE: Saving a JSignature

You are preparing your query twice.

This one is correct, you pass a string to it as it expects:

$str=$conn->prepare("Update cservice Set signature = :sig");

Then you prepare it again for some reason and pass the object resulting from the last prepare statement:

$stmt = $conn->prepare($str);


Why are doing that? The prepare method expects a string, the second time you call it you give it an object.

Try running the prepare statement only once and using the result object correctly:

CODE

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

This by the way has nothing to do with the table's column type. A Blob can accept a long text string just fine.

----------------------------------
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

RE: Saving a JSignature

(OP)
WooHoo!!! It saved! Now, I'm sure this is simple...how do I display it? I used

CODE --> php

echo "X<br>" . $sig . "<br>X"; 
and got...
X
Array
X

BTW...Thanks to everyone for helping!

RE: Saving a JSignature

What exactly is in $sig? Looks like you are getting an array back probably as a result form your query. Also echoing it like that, will just show a bunch of characters as explained before.

You can of course use print_r to output an array.

CODE

echo "X<br>" . print_r($sig,1) . "<br>X"; 

You are going to have to create a PHP file that has the proper image headers, to display the image.



----------------------------------
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

RE: Saving a JSignature

(OP)
Does this need to be converted back to an image?

Here's my output (this is what is in the db field)...

X
Array ( [signature] => image/jsignature;base30,4B0000632567hllnrnhd895522020_4MZ88bap691000Y9hfh9500Z77bdfdb9_eGe5000Z3230Y599753232448ahllnjhd6120232027bffbb62_5EZgbohdb96Ybdd975Z556774200Y99d977Z25accdd650Y8b7220Z5 [0] => image/jsignature;base30,4B0000632567hllnrnhd895522020_4MZ88bap691000Y9hfh9500Z77bdfdb9_eGe5000Z3230Y599753232448ahllnjhd6120232027bffbb62_5EZgbohdb96Ybdd975Z556774200Y99d977Z25accdd650Y8b7220Z5 )
X

RE: Saving a JSignature

Not technically converted. But as you cannot display a bunch of characters as an image you will need to make PHP output proper headers so the characters are read as binary data by the browser and interpreted as an actual image.

Read here for how to do this:

https://www.codexworld.com/store-retrieve-image-fr...

----------------------------------
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close