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

By 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.

File Size: 389 KB
Views Total: 92670
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <link href="/path/to/jquery.signaturepad.css" rel="stylesheet" />

2. Create the html for a signature pad.

view source
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.

view source
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.

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

5. Regenerate the signature from JSON data.

view source
1 $('.sigPad').signaturePad({
2   displayOnly:true
3 }).regenerate(sig);
view source
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.

view source
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
28   

Share this:

Related posts: