Touch enabled Signature Plugin with jQuery Canvas - Download Touch-enabled Signature Plugin with jQuery and Canvas

Download Touch-enabled Signature Plugin with jQuery and Canvas

By Posted on

This time I will share jQuery Plugin and tutorial about Touch-enabled Signature Plugin with jQuery and Canvas, hope it will help you in programming stack.

Touch enabled Signature Plugin with jQuery Canvas - Download Touch-enabled Signature Plugin with jQuery and Canvas
File Size: 10.2 KB
Views Total: 8993
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Signature is a lightweight jQuery plugin that creates an Html5 canvas based signature pad for smooth, touch-enabled signature drawing.

How to use it:

1. Add the latest jQuery library and the jQuery signature plugin into the web page.

view source
1 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
2 <script src="jq-signature.js"></script>

2. Create a signature field as follow. You can pass the options to the signature field using Html5 data-option attributes.

view source
1 <div class="js-signature"
2      data-width="600"
3      data-height="200"
4      data-border="1px solid #1ABC9C"
5      data-background="#16A085"
6      data-line-color="#fff"
7      data-auto-fit="true">
8 </div>

3. Create buttons to clear and save your signature.

view source
1 <button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
2 <button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button>

4. Create an empty element to place your saved signature for download.

view source
1 <div id="signature">
2    
3 </div>

5. The JavaScript to enable the signature field.

view source
01 $(document).on('ready', function() {
02   $('.js-signature').jqSignature();
03 });
04  
05 function clearCanvas() {
06   $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
07   $('.js-signature').jqSignature('clearCanvas');
08   $('#saveBtn').attr('disabled', true);
09 }
10  
11 function saveSignature() {
12   $('#signature').empty();
13   var dataUrl = $('.js-signature').jqSignature('getDataURL');
14   var img = $('<img>').attr('src', dataUrl);
15   $('#signature').append($('<p>').text("Here's your signature:"));
16   $('#signature').append(img);
17 }
18  
19 $('.js-signature').on('jq.signature.changed', function() {
20   $('#saveBtn').attr('disabled', false);
21 });

6. You can also pass the options during initialization.

view source
01 $('.js-signature').jqSignature({
02  
03 // The color of the signature
04 lineColor: '#222222',
05  
06 // The width of the signature line
07 lineWidth: 1,
08  
09 // The CSS for the border of the canvas.
10 border: '1px dashed #AAAAAA',
11  
12 // The CSS for the background of the canvas.
13 background: '#FFFFFF',
14  
15 // The width of the signature canvas (in pixels)
16 width: 300,
17  
18 // The height of the signature canvas (in pixels).
19 height: 100,
20  
21 // Make the canvas fill the width of its parent element.
22 autoFit: false
23  
24 });

7. Methods.

view source
1 // Clears the signature canvas.
2 $().jqSignature('clearCanvas');
3  
4 // Get the contents of the signature canvas as a base64 data URL.
5 $().jqSignature('getDataURL');

Change log:

2016-07-14

  • bumping to v1.1.0

2016-07-12

  • IE Fix.

2015-09-05

  • Fixing clearCanvas bug in IE11/Edge

This awesome jQuery plugin is developed by bencentra. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: