Page 3 of 7

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

Posted: Tue Dec 23, 2014 1:58 pm
by 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

Image


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

Posted: Wed Dec 24, 2014 12:48 am
by 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.


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

Posted: Wed Dec 24, 2014 2:36 pm
by Wilson W

Awesome!

That did the trick
Thanks again Yurii for your expertise


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

Posted: Wed Dec 24, 2014 6:10 pm
by 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


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

Posted: Wed Dec 24, 2014 7:10 pm
by 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


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

Posted: Thu Dec 25, 2014 1:09 am
by Yurii Orishchuk

Hi Wilson,

Many thanks for this sharing.

Glad it works.

Regards.


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

Posted: Mon Dec 29, 2014 8:48 pm
by 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


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

Posted: Mon Dec 29, 2014 11:25 pm
by 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.


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

Posted: Wed Dec 31, 2014 4:03 pm
by 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


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

Posted: Fri Jan 02, 2015 9:40 pm
by 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