Link Signature Pad & Signature to Image

[johnyiever]

I'm new to web development and am having trouble generating a json of my signature.

I'm confused on how to link them all together (I'm guessing the "action=" in the html). I wasn't able to get the regenerate example to regenerate my signature. It looks like it grabs from the sample-signature-output...js, so I'm wondering how I can output a similar file, but with my signature from the accept-signature.

[thomasjbradley]

I don't know what backend language you're using, but I did a complete tutorial with PHP and MySQL here: http://thomasjbradley.ca/articles/saving-signatures-php-mysql/

[johnyiever]

Woah, thanks for the prompt reply!

Aside from making a Database for the signatures, are the examples provided fully working examples? I would like to test signing, submitting, and regenerating, just so I know that displaying the signature and saving it as a .png is working. But since they are two separate .zip project files, I'm not sure how to link them together :(

[thomasjbradley]

The example application above should fully work when it's set up. It should capture the signature, store it, then regenerate it. But the sample app doesn't keep PNGs of the images.

I'm not sure what you mean by "two separate .zip files".

[johnyiever]

Okay, sounds good, I guess I'll keep at it! By two separate .zip files, I mean the project files you provide, each with it's own function (Signature Pad and Signature to Image). They exist in their own folders, so I'm not sure how I can link them.

For now, all I did was link them by changing the "action=" of "accept-signature.html" to "action="regenerate-image.html", but after I click the Submit button, only the "sample-signature-output.js" signature is shown and not my own.

Sorry if this is a "face-palm" moment haha

[thomasjbradley]

Okay, I understand. You're correct in changing the action, but it would need to changed to a PHP file that can capture the signature and output it again to be regenerated.

[johnyiever]

I've moved all my project files to EasyPHP and have pointed the "action" to "signature-to-image.php". I checked in the .php file and it says it grabs from a previously created JSON signature. I don't think my "accept signature.html" is generating the JSON file.

[thomasjbradley]

You are correct: accept-signature.html isn't generating a JSON file.

Inside the signature to image examples folder, there's a "from-json" example. It is definitely grabbing from a file. But you could change one line and it would then grab from the form:

$img = sigJsonToImage(file_get_contents('sig-output.json'));

Change to:

$img = sigJsonToImage(filter_input(INPUT_POST, 'output', FILTER_UNSAFE_RAW));

That should work, but isn't the most secure way of doing it. The sample application I linked to above validates the information before transforming it into a PNG.

Then you'd point your action to that example file instead of directly to the signature-to-image.php because it won't do anything by itself, it just holds the function we want to execute.

[johnyiever]

Thank you for your help! I was able to regenerate the signature in the browser and save it as a .png as well! I'll move a long to the Database example you provided. Thank you for your help, I really appreciate it!