Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Capture Signature using HTML5 and iPad

People also ask

How do I capture a signature in HTML?

Reserve a path element inside the container svg. Use touch events ( touchstart , touchmove , touchend ) for the user to draw the signature using touch inputs. Use mouse events ( mousedown , mousemove , mouseup , mouseout ) for the user to draw the signature using mouse inputs.

What is jSignature?

jSignature is a JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger. Works in all mainstream browsers that support Canvas or Flash. Captures signatures as smooth vector images.


Here's another canvas based version with variable width (based on drawing velocity) curves: demo at http://szimek.github.io/signature_pad and code at https://github.com/szimek/signature_pad.

signature sample


A canvas element with some JavaScript would work great.

In fact, Signature Pad (a jQuery plugin) already has this implemented.


Here is a quickly hacked up version of this using SVG I just did. Works well for me on my iPhone. Also works in a desktop browser using normal mouse events.


Perhaps the best two browser techs for this are Canvas, with Flash as a back up.

We tried VML on IE as backup for Canvas, but it was much slower than Flash. SVG was slower then all the rest.

With jSignature ( http://willowsystems.github.com/jSignature/ ) we used Canvas as primary, with fallback to Flash-based Canvas emulator (FlashCanvas) for IE8 and less. Id' say worked very well for us.


The options already listed are very good, however here a few more on this topic that I've researched and came across.

1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/

And as always you may want to save the canvas to image:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

good luck and happy signing