Capture Signature in the webpage with jQuery plugins

In today’s digital age, capturing signatures electronically has become a common requirement for various web applications. Whether it’s for online contracts, consent forms, or document verification, the ability to capture signatures directly on a webpage offers convenience, efficiency, and a seamless user experience.

To achieve this functionality, jQuery, a popular JavaScript library, provides several plugins specifically designed for signature capture.

In this article, we will explore three noteworthy jQuery plugins – jSignature, Signature Pad, and jQuery UI Signature – each offering unique features and customization options. By harnessing the power of these plugins, web developers can easily integrate signature capture functionality into their web applications, revolutionizing the way signatures are obtained in the digital realm.

Let’s delve into the intricacies of each plugin, examining its key features and illustrating their usage through practical examples. By the end of this article, you will have a comprehensive understanding of these jQuery plugins and be equipped with the knowledge to implement signature capture on your webpages effortlessly.

So, let’s get started and discover the immense potential of jQuery signature plugins!

---

Table of Content

1. jSignature
2. jQuery Signature Pad
3. jQuery UI Signature
4. Conclusion

---

1. jSignature

Here, are some steps for including this plugin –

Steps

• Download the jSignature plugin and include the following scripts –

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="libs/jSignature.min.js"></script>
<script src="libs/modernizr.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

You need to include flashcanvas.js script for IE older versions.

• Create a container element.

<div id="signature"></div>

• Initializing jSignature on the container.

$("#signature").jSignature({'UndoButton':true});

Example

In the example, I am showing the image preview of the signature when the button gets clicked.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- jSignature -->
<script src="libs/jSignature.min.js"></script>
<script src="libs/modernizr.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

<!-- jSignature -->
<style>
#signature{
    width: 100%;
    height: auto;
    border: 1px solid black;
}
</style>

<!-- Signature area -->
<div id="signature"></div><br/>
 
<input type='button' id='click' value='click'>
<textarea id='output'></textarea><br/>

<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' />

<!-- Script -->
<script>
$(document).ready(function() {

    // Initialize jSignature
    var $sigdiv = $("#signature").jSignature({'UndoButton':true});

    $('#click').click(function(){
         // Get response of type image
         var data = $sigdiv.jSignature('getData', 'image');

         // Storing in textarea
         $('#output').val(data);

         // Alter image source 
         $('#sign_prev').attr('src',"data:"+data);
         $('#sign_prev').show();
    });
});
</script>

View Demo

---

2. jQuery Signature Pad

It uses an HTML5 canvas where the user can draw their signature. It works on all modern browsers and doesn’t depend on any external libraries.

Steps

• Download the plugin from here and include the following script –

<script src="js/signature_pad.js"></script>

• Create a canvas element.

<canvas id="signature-pad" class="signature-pad" width="300px" height="200px"></canvas>

• Initialize SignaturePad on the canvas.

var signaturePad = new SignaturePad(document.getElementById('signature-pad'));

Example

Showing the signature preview when the preview button gets clicked.

<style>
#signature{
    width: 300px; height: 200px;
    border: 1px solid black;
}
</style>

<!-- Signature -->
<div id="signature" style=''>
    <canvas id="signature-pad" class="signature-pad" width="300px" height="200px"></canvas>
</div><br/>
 
<input type='button' id='click' value='preview'><br/>
<textarea id='output'></textarea><br/>

<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' />

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="signature_pad-master/example/js/signature_pad.js"></script>
 
<script>
$(document).ready(function() {
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'));

    $('#click').click(function(){
         var data = signaturePad.toDataURL('image/png');
         $('#output').val(data);

         $("#sign_prev").show();
         $("#sign_prev").attr("src",data);
         // Open image in the browser
         //window.open(data);
    });
})
 </script>

View Demo

---

3. jQuery UI Signature

This plugin uses the jQuery UI library and mouse module to draw a signature. You can get this library from here.

Steps

• First, include jQuery UI library on your page with jQuery.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

• Include jquery.signature.css and jquery.signature.js.

<link type="text/css" href="css/jquery.signature.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.signature.js"></script>

• For enabling touch on device you need to include jquery.ui.touch-punch.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

• You need to include excanvas.js for IE older versions.

<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->

• Create a container element.

<div id="signature"></div>

• Initialize signature on the container

// Initialize
 $('#signature').signature();

Example

Displaying the signature preview when the preview button gets clicked.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="jquery.signature/jquery.signature.css" rel="stylesheet">
<style>
#signature,#prev{
    width: 300px;
    height: 200px;
}
</style>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.signature/jquery.signature.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>
<script>
$(function() {
 
    // Initialize
    $('#signature').signature();

    // Clear signature area
    $('#clear').click(function() {
         $('#signature').signature('clear');
    });

    // Get JSON response and show preview
    $('#but_prev').click(function() {
        var output = $('#signature').signature('toJSON');
        $('#json_output').val(output);
        $('#prev').signature('draw', $('#json_output').val()); 
    });
    $('#prev').signature({disabled: true}); 
});
</script>

<!-- Signature -->
<div id="signature"></div>
<div style="clear: both;"><button id="clear">Clear</button> 
    <button id="but_prev">Preview</button>
</div>
<textarea id='json_output'></textarea><br/>

<!-- Preview -->
<div id='prev'></div>

View Demo

---

4. Conclusion

By utilizing jQuery signature plugins such as jSignature, Signature Pad, and jQuery UI Signature, you can easily implement signature capture functionality on webpages. These plugins provide customizable features, allowing users to save signatures in databases or download them as image files.

You can learn more about these plugins and various other features from their documentation and examples.

If you found this tutorial helpful then don't forget to share.