dancrew32 / signature-pad

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

Signature Pad

SignaturePad: A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

Copyright MMXI, Thomas J Bradley, [e-mail]

Dependencies: FlashCanvas/1.5, json2, jquery/1.3.2+

Versioned using Semantic Versioning, http://semver.org/

Quick Start

1. Include jquery.signaturepad.css, flashcanvas.js, jquery.js, jquery.signaturepad.js, json2.js in your HTML file
2. Create the HTML, following the example: https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-signature.html
3. $('.sigPad').signaturePad();
4. Remember that most things are configurable

Complete Documentation

http://thomasjbradley.ca/lab/signature-pad

Examples

• Accepting a Signature
• Requiring a Drawn Signature
• Regenerating a Signature
• Accepting Multiple Signatures

Demos

• Accepting a Signature
• Requiring a Drawn Signature
• Regenerating a Signature

Converting to an Image

Client Side

The API includes a method called signatureToImage() which will return a Base64 encoded PNG to Javascript.

Unfortunately, the function doesn’t work in all browsers, only because the underlying toDataURL() method of <canvas> isn’t implemented well. The primary culprit of poor implementation is Android OS < 3. The function does work in IE thanks to FlashCanvas.

Server Side

• Signature to Image—PHP to JPEG, PNG or GIF by Thomas J Bradley
• sigToSvg—PHP to SVG by Charles Gebhard
• python-signpad2image—Python to PNG by Alan Viars
• SignatureToDotNet—C# to JPEG, PNG or GIF by Curtis Herbert
• sigJsonToImage—ColdFusion to PNG by James Moberg

Source Code

http://github.com/thomasjbradley/signature-pad

License

Signature Pad is licensed under the New BSD license.

All dependencies: jQuery, JSON 2, and FlashCanvas retain their own licenses.