Capture Signature in the webpage with jQuery plugins

In this tutorial, I show you some jQuery plugins by using them you can capture the user signature on your web page.

I discuss the following plugins with an example –

jSignature
Signature Pad
jQuery UI Signature

They add a container on the web page where the user can draw its signature using the mouse pointer.

Download

jSignature
Signature Pad
jQuery UI Signature
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. 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

In the demonstration, I show you some simple examples using jQuery plugins which you can easily implement within your project and you can save the generated value in your database table for later use or download it as image format.

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.

Contents

1. jSignature

2. Signature Pad

3. jQuery UI Signature

4. Conclusion