This time I will share jQuery Plugin and tutorial about Smooth Signature Pad Plugin with jQuery and Html5 Canvas, hope it will help you in programming stack.
Signature Pad is a jQuery plugin that takes advantage of HTML5 canvas
element and javascript to create a flexible and smooth Signature Pad on your web page & app.
The plugin also has the ability to record the drawn signature in JSON for later regeneration.
Key Features:
- Automatically generates handwritten signatures from text you type.
- Or draw signatures with mouse drag or touch swipe events.
- Store and get signatures using JSON.
Dependencies:
More examples:
Basic Usage:
1. Include the required jQuery Signature Pad stylesheet in the head section of your page.
1 |
< link href = "/path/to/jquery.signaturepad.css" rel = "stylesheet" /> |
2. Create the html for a signature pad.
01 |
< pre class = "brush:xml;" style = "width: 1709.53px;" >< form method = "post" action = "" class = "sigPad" > |
02 |
< label for = "name" >Type your name</ label > |
03 |
< input type = "text" name = "name" id = "name" class = "name" > |
04 |
< p class = "typeItDesc" >Review your signature</ p > |
05 |
< p class = "drawItDesc" >Draw your signature</ p > |
07 |
< li class = "typeIt" >< a href = "#type-it" class = "current" >Type It</ a ></ li > |
08 |
< li class = "drawIt" >< a href = "#draw-it" >Draw It</ a ></ li > |
09 |
< li class = "clearButton" >< a href = "#clear" >Clear</ a ></ li > |
11 |
< div class = "sig sigWrapper" > |
12 |
< div class = "typed" ></ div > |
13 |
< canvas class = "pad" width = "198" height = "55" ></ canvas > |
14 |
< input type = "hidden" name = "output" class = "output" > |
16 |
< button type = "submit" >I accept the terms of this agreement.</ button > |
3. Load the necessary javascript library files at the bottom of your page.
02 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
05 |
< script src = "/path/to/json2.min.js" ></ script > |
08 |
< script src = "/path/to/jquery.signaturepad.js" ></ script > |
4. Initialize the signature pad by calling the function on the form element.
2 |
$( '.sigPad' ).signaturePad(); |
5. Regenerate the signature from JSON data.
1 |
$( '.sigPad' ).signaturePad({ |
03 |
{ "lx" :20, "ly" :34, "mx" :20, "my" :34}, |
04 |
{ "lx" :21, "ly" :33, "mx" :20, "my" :34}, |
05 |
{ "lx" :22, "ly" :31, "mx" :21, "my" :33}, |
06 |
{ "lx" :23, "ly" :30, "mx" :22, "my" :31}, |
07 |
{ "lx" :25, "ly" :27, "mx" :23, "my" :30}, |
08 |
{ "lx" :27, "ly" :25, "mx" :25, "my" :27}, |
09 |
{ "lx" :29, "ly" :23, "mx" :27, "my" :25}, |
6. All possible options to customize the signature pad.
01 |
$( '.sigPad' ).signaturePad({ |
04 |
defaultAction : 'typeIt' , |
25 |
penColour : '#145394' , |