This time I will share jQuery Plugin and tutorial about Customizable Signature Pad Plugin With jQuery, hope it will help you in programming stack.
A lightweight yet fully configurable Signature Pad plugin used to draw a downloadable electronic signature on an HTML canvas element.
More Features:
- Customizable background and signature colors.
- With or without a guideline.
- Export signature as SVG, PNG, JPG, or JSON.
How to use it:
1. Load the necessary jQuery and jQuery UI on the HTML page.
1 |
< link rel = "stylesheet" href = "/path/to/cdn/jquery-ui.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/cdn/jquery-ui.min.js" ></ script > |
2. Download the plugin and load the following files in the document.
1 |
< link href = "css/jquery.signature.css" rel = "stylesheet" /> |
2 |
< script src = "js/jquery.signature.js" ></ script > |
3. Create an empty DIV element that serves as the container for the signature pad.
4. Call the function on the DIV container to generate a default signature pad.
1 |
var sig = $( '#sig' ).signature(); |
5. Customize the appearance of the signature pad.
01 |
var sig = $( '#sig' ).signature({ |
6. Determine whether to show a guideline on the pad.
01 |
var sig = $( '#sig' ).signature({ |
07 |
guidelineColor: '#a0a0a0' , |
7. Determine the output file type.
1 |
var sig = $( '#sig' ).signature({ |
8. Specify the selector, DOM element, or jQuery object for an input field to automatically synchronize with a text version of the signature.
1 |
var sig = $( '#sig' ).signature({ |
9. Customize the error message to show if the browser doesn’t supports HTML5 canvas.
1 |
var sig = $( '#sig' ).signature({ |
3 |
notAvailable: 'Your browser doesn't support signing' , |
10. Determine the scale factor.
1 |
var sig = $( '#sig' ).signature({ |
11. Trigger a function every time the signature changes.
1 |
var sig = $( '#sig' ).signature({ |
12. API methods.
02 |
sig.signature( 'option' , settings); |
05 |
sig.signature( 'option' , name, value); |
08 |
sig.signature( 'option' ); |
11 |
sig.signature( 'option' , name); |
14 |
sig.signature( 'enable' ); |
15 |
sig.signature( 'disable' ); |
18 |
sig.signature( 'clear' ); |
21 |
sig.signature( 'isEmpty' ); |
24 |
sig.signature( 'toDataURL' ); |
27 |
sig.signature( 'toJSON' ); |
30 |
sig.signature( 'toSVG' ); |
33 |
sig.signature( 'draw' , sig); |
36 |
sig.signature( 'destroy' ); |