Touch-friendly Signature Field Plugin For jQuery - jSignature

jSignature is a jQuery plugin that lets you create a mobile-friendly, cross-browser, canvas based signature field using HTML5 canvas. The plugin has the ability to extract signature data as multiple file formats such as native, image, base30, image/jsignature;base30, SVG, image/svg+xml, svgbase64, image/svg+xml;base64 and more.

Basic usage:

1. Load the main JavaScript file jSignature.js and the jSignature's plugins of your choice in the document.

• jSignature.CompressorBase30.js: custom "base30" format export and import plugin
• jSignature.CompressorSVG.js: SVG export plugin
• jSignature.UndoButton.js: Undo Button and undo functionality plugin
• jSignature.SignHere.js: Sign Here "sticker" plugin

<!-- required JS files -->
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jSignature.js"></script>

<!-- optional plugins -->
<script src="plugins/jSignature.CompressorBase30.js"></script>
<script src="plugins/jSignature.CompressorSVG.js"></script>
<script src="plugins/jSignature.UndoButton.js"></script> 
<script src="plugins/signhere/jSignature.SignHere.js"></script> 

2. Create a container element for the Signature Field. jSignature inherits colors from parent element. Text = Pen color. Background = Background. (This works even when Flash-based Canvas emulation is used.)

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

3. Initialize/enable the Signature Field with default options.

$("#signatureparent").jSignature();

4. Customize the Signature Field with the following options.

$("#signatureparent").jSignature({

  // line color
  color:"#f00",

  // line width
  lineWidth:5,

  // width/height of signature pad
  width:300,
  height:200,

  // background color
  background-color:"#0f0"
  
});

5. API methods:

// Resets the signature pad
$("#signatureContainer").jSignature('reset');

// Destroy the signature pad
$("#signatureContainer").jSignature('destroy');

// Returns a data object appropriate for the data format
$("#signatureContainer").jSignature('getData', FORMATNAME);

// Sets data
$("#signatureContainer").jSignature('setData', DATAOBJECT, FORMATNAME);

// Disables the signature pad
$("#signatureContainer").jSignature('disable');

// Re-enable the signature pad
$("#signatureContainer").jSignature('enable');

// Returns a boolean true if the jSignature was modified
$("#signatureContainer").jSignature('isModified');

// Returns the configurable settings
$("#signatureContainer").jSignature('getSettings');

// Updates certain settings
$("#signatureContainer").jSignature('updateSetting', SETTINGNAME, VALUE, Boolean);

Changelog:

2018-11-12

• Added hasEventListener check for addEventListener addition to fix issues with ontouchstart on Windows 10

2018-08-27

• v2.1.2

---

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