customizable signature pad - Free Download Customizable Signature Pad Plugin With jQuery

Free Download Customizable Signature Pad Plugin With jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Customizable Signature Pad Plugin With jQuery, hope it will help you in programming stack.

customizable signature pad - Free Download Customizable Signature Pad Plugin With jQuery
File Size: 40.6 KB
Views Total: 914
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <div id="sig"></div>

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({
02  
03     // The minimum distance to start a drag.
04     distance: 0,
05  
06     // The background colour.
07     background: '#fff',
08  
09     // The colour of the signature.
10     color: '#000',
11  
12     // The thickness of the lines.
13     thickness: 2
14      
15 });

6. Determine whether to show a guideline on the pad.

01 var sig = $('#sig').signature({
02  
03     // enable/disable the guideline
04     guideline: false,
05  
06     // guideline colour.
07     guidelineColor: '#a0a0a0',
08  
09     // guideline offset (pixels) from the bottom
10     guidelineOffset: 50,
11  
12     // guideline indent (pixels) from the edges
13     guidelineIndent: 10
14  
15 });

7. Determine the output file type.

1 var sig = $('#sig').signature({
2  
3     // 'JSON', 'SVG', 'PNG', 'JPEG'
4     syncFormat: 'JSON',
5  
6     // determine whether to use the style attribute in SVG
7     svgStyles: false,
8  
9 });

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({
2  
3     syncField: null
4  
5 });

9. Customize the error message to show if the browser doesn’t supports HTML5 canvas.

1 var sig = $('#sig').signature({
2  
3     notAvailable: 'Your browser doesn't support signing',
4  
5 });

10. Determine the scale factor.

1 var sig = $('#sig').signature({
2  
3     scale: 1
4  
5 });

11. Trigger a function every time the signature changes.

1 var sig = $('#sig').signature({
2  
3     change: null
4  
5 });

12. API methods.

01 // up<a href="https://www.jqueryscript.net/time-clock/">date</a> options
02 sig.signature('option', settings);
03  
04 // update an option
05 sig.signature('option', name, value);
06   
07 // retrieve options
08 sig.signature('option');
09  
10 // retrieve an option
11 sig.signature('option', name);
12   
13 // enable/disable the instance
14 sig.signature('enable');
15 sig.signature('disable');
16  
17 // clear signature
18 sig.signature('clear');
19  
20 // check if is empty
21 sig.signature('isEmpty');
22  
23 // convert the signature to an image (data:URL)
24 sig.signature('toDataURL');
25  
26 // convert the signature to JSON
27 sig.signature('toJSON');
28  
29 // convert the signature to SVG
30 sig.signature('toSVG');
31  
32 // draw the signature from JSON, SVG, or a data: URL
33 sig.signature('draw', sig);
34   
35 // destroy the instance
36 sig.signature('destroy');