eSignature Using jQueryPavan Vangara | Oct 15 2011 | 15 Comments

Currently documents, applications and various business automations are being extended to capture electronic signatures. This eSignature is authorized and is embedded in many business approval processes and workflow.

Recently one of my clients required signature capture for their application. Using many tools available in the developer marketplace eSignatures can be enabled seamlessly into your application. One method is using jQuery. A jQuery based Signature-Pad plug-in is available with use of the HTML 5 canvas (Download jquery.signaturepad.js, json2.min.js). This is a simple plug-in that can be customized easily. This plug-in retains the signature data in a JSON array format that can be used to regenerate the eSignature. This signature capture functions in all HTML 5 supported browsers of desktop and mobile devices (smartphone & tablet). It is compatible with most content management system environments such as DotNetNuke, Drupal, WordPress, Ektron as well as development web platforms such as PHP, .NET, Java.

Implementation

• 1. Create an HTML file and signature wrapper. Example:
  (div class="sigPad")
  (ul class="sigNav")
  (li)(label)Signature(/label)(/li)
  (li class="clearButton")(a href="#clear")Clear(/a)(/li)
  (/ul)
  (div class="sig sigWrapper")
  (canvas class="pad" width="398" height="150")(/canvas)
  (input type="hidden" name="output" class="output")
  (/div)
  (/div)
  (** For above example replace "(" and ")" with "<" and ">" respectively for your testing.)
  • a. Note the output is a hidden text field where the plug-in will write signature data in a JSON array.
  • b. Include this javascript file and confirm the use of the most recent jQuery version files.
• 2. Initiate signature pad
  $(document).ready(function () {
  $('.sigPad').signaturePad();
  });
   
• 3. Notes:
  • a. The plug-in includes a default CSS file jquery.signaturepad.css which you may require adjustments to meet your design needs.
  • b. By default the plug-in is set to type mode. This means when user enters a text field, the signature pad captures that text and displays on the canvas.
  • c. In this example we changed the default mode to draw.

Regenerate Signature

JSON array which is generated is actually X, Y positions of mouse from starting position to ending position.

To regenerate signature on canvas use:
$('.sigPad').signaturePad({displayOnly:true}).regenerate(JSONData)
where JSONData is captured JSON array list.
 

If you want to save signature as an image you need to write procedure that reads JSON data and generates bitmap. Further the open source build using C# from https://github.com/parrots/SignatureToImageDotNet is most useful that creates images from JSON data and http://thomasjbradley.ca/lab/signature-pad also has very nice PHP, Java references to create image from JSON Data.