Smooth Signature Pad Plugin with jQuery Html5 Canvas - Free Download Smooth Signature Pad Plugin with jQuery and Html5 Canvas

Free Download Smooth Signature Pad Plugin with jQuery and Html5 Canvas

Posted on

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.

Smooth Signature Pad Plugin with jQuery Html5 Canvas - Free Download Smooth Signature Pad Plugin with jQuery and Html5 Canvas
File Size: 389 KB
Views Total: 92670
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>
06   <ul class="sigNav">
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>
10   </ul>
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">
15   </div>
16   <button type="submit">I accept the terms of this agreement.</button>
17 </form></pre>

3. Load the necessary javascript library files at the bottom of your page.

01 <!-- jQuery -->
02 <script src="/path/to/cdn/jquery.min.js"></script>
03  
04 <!-- json2.js -->
05 <script src="/path/to/json2.min.js"></script>
06  
07 <!-- signature pad -->
08 <script src="/path/to/jquery.signaturepad.js"></script>
09  
10 <!-- for IE -->
11 <!--[if lt IE 9]>
12   <script src="/path/to/flashcanvas.js"></script>
13 <![endif]-->

4. Initialize the signature pad by calling the function on the form element.

1 $(function(){
2   $('.sigPad').signaturePad();
3 });

5. Regenerate the signature from JSON data.

1 $('.sigPad').signaturePad({
2   displayOnly:true
3 }).regenerate(sig);
01 // signature data
02 var sig = [
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},
10     ...
11 ]

6. All possible options to customize the signature pad.

01 $('.sigPad').signaturePad({
02  
03   // What action should be highlighted first: typeIt or drawIt
04   defaultAction : 'typeIt',
05  
06   // Initialize canvas for signature display only; ignore buttons and inputs
07   displayOnly : false,
08  
09   // Whether the to allow a typed signature or not
10   drawOnly : false,
11  
12   // Selector for selecting the canvas element
13   canvas : 'canvas,'
14  
15   // Parts of the signature form that require Javascript (hidden by default)
16   sig : '.sig',
17  
18   // The TypeIt/DrawIt navigation (hidden by default)
19   sigNav : '.sigNav',
20  
21   // The colour fill for the background of the canvas; or transparent
22   bgColour : '#ffffff',
23  
24   // Colour of the drawing ink
25   penColour : '#145394',
26  
27   // Thickness of the pen