A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.
Clone or download
Pull request Compare This branch is 91 commits behind thread-pond:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
examples
.gitignore
.jshintrc
CHANGELOG.md
NEW-BSD-LICENSE.txt
README.md
VERSION.txt
build.js
jquery.signaturepad.js
pen.psd

README.md

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, hey@thomasjbradley.ca

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

Demos

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

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.