How to implement canvas based signature (using signature_pad javascript)?

[Wilson W]

Thanks much for the reply Yurii
deleted offending segment and not getting error any more

but am not getting the sig pad

Please let me know what we need to change

Thank you very much
Wilson

[Yurii Orishchuk]

Hi Wilson,

Also i see you passed "canvas" - it's jQuery wrapper for element in your context. You need to pass html element.

So replace this line of code:

pre

var signaturePad = new SignaturePad(canvas);

/pre

With following one:

pre

var signaturePad = new SignaturePad(canvas[0]);

/pre

Regards.

[Wilson W]

Awesome!

That did the trick
Thanks again Yurii for your expertise

[Wilson W]

Hello Yurii

Got the sigpad working thanks to your expertize
and able to sig fine with a mouse

but when on smartphone using my finger I get no crisp results
its like am just painting the entire pad black even by drawing a straight line

resident genius(es) please let me know what you think can help

Thanks much
Wilson
http://timeinapp.app.appery.io/sign_i...
Test username user001 Test Password user001

[Wilson W]

Hello Team

got this going - ie able to use finger to sign on smart phone
will post the changes here for the poor soul who may be implementing this next

changed code in js signaturepad from

old code

************************************************

this.velocityFilterWeight = opts.velocityFilterWeight 0.7;
this.minWidth = opts.minWidth 0.5;
this.maxWidth = opts.maxWidth 2.5;
this.dotSize = opts.dotSize function () {
return (this.minWidth + this.maxWidth) / 8;

*************************************************

new code

this.velocityFilterWeight = opts.velocityFilterWeight 1.5;
this.minWidth = opts.minWidth 2.5;
this.maxWidth = opts.maxWidth 2.5;
this.dotSize = opts.dotSize function () {
return (this.minWidth + this.maxWidth) / 8;

Thanks much
Wilson

[Yurii Orishchuk]

Hi Wilson,

Many thanks for this sharing.

Glad it works.

Regards.

[Wilson W]

Hello Team

Any idea on how to save signature to database ?

trying to use these instructions but its slow going
http://greenethumb.com/article/1429/u...

Thanks much for your time and help

Wilson

[Yurii Orishchuk]

Hi Wilson,

You can convert current canvas source to base64 and then store this string - to text type collection field.

Here is how to get base64 string from canvas:

precode

var canvas = jQuery("signature_pad");

var c = canvas[0];
var ctx = c.getContext("2d");

//Get base64String.
var base64String = c.toDataURL();

console.log("base64String = " + base64String);

//here you can use this "base64String" value to store in DB.

/code/pre

Regards.

[Wilson W]

Thanks much Yurii

will give this a good try and update you on the results

but an noticing that my app is not saving data to the database

Please give a quick look and let me know if we need to change anything
http://timeinapp.app.appery.io/sign_i...
user002 password user/002

Thanks much
Wilson

[Wilson W]

Hello Team

Help on best way to save sig to database

Post https://api.appery.io/rest/1/db/colle...

Does not seem to do the trick -
Your help is very much appreciated