Touch-friendly Signature Field Plugin For jQuery - jSignature
File Size: | 191 KB |
---|---|
Views Total: | 17979 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.