home | portfolio | blog | links | contact

jSignature

jSignature is a plugin for jQuery which simplifies the creation of a field that allows a user to enter a signature either via a mouse, your finger on touch enabled devices (e.g. iPhones, iPads or Android devices) or a pen input device. This plugin is currently in alpha and is very much just a concept so it may not be ready for production.

Note: Github now has the latest jSignature v2 which has alot more functionality thanks to major contribution from Daniel Dotsenko. See https://github.com/brinley/jSignature/blob/master/README.md

Please report any bugs or suggestion to https://github.com/brinley/jSignature/issues

Download from https://github.com/brinley/jSignature/.

Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

To Dos


Usage

The setup is quite straight forward, simply include jQuery and jSignature.js. At present, this plugin has only been tested with jQuery 1.4.4

 <script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature({color:"#00f",lineWidth:5});
 });
 </script>


Methods

Name Usage Description
clear .jSignature("clear") Empties and resets the canvas.
getData .jSignature("getData", "base30") Converts the canvas into a base64 encoded data string which can be saved as a string in any database during a form post or submit.
importData .jSignature("importData",dataurl) Updates an existing jSignature canvas with the dataurl extracted from the above getData method.

Options

Name Description Default
width Defines the width of the canvas. Numerical value without % or px 250
height Defines the height of the canvas. Numerical value without % or px 150
color Defines the color of the strokes on the canvas. Accepts any color hex values. #000
background-color Defines the background color of the canvas. Accepts any color hex values. #fff
lineWidth Defines the thickness of the lines. Accepts any positive numerical value 1
cssclass Defines a custom class for the canvas. None

Importing back the Image

After the canvas image has been imported and saved into the database, you can easily display the image via its base64 encoded string,

To do it via jQuery, you can use something like,

$("<img class='imported'></img>").attr("src",sig.jSignature('getData', 'base30')).appendTo(sig);


Or simply do it from the server side by entering the data string into an img's source tag,

<img src="<? echo $datastring ?>" />


You can also import the dataUrl back into a jSignature canvas so that you can edit the signature through the following JavaScript code,

$("#signature").jSignature("importData",dataurl);


dataurl is the same data string used above. You can see it in action in the demos below by copying a data string from one of the jSignatures then clicking on "Import Data to Canvas" of another jSignaure and pasting the data string into the dialog box that appears.


Basic example with default options

This is the easiest and fastest way to use this jSignature.

The export button demostrates the export feature that converts the canvas into a data string that can be saved or stored on a data storage mechanism.

The import button demostrates how you can convert the exported data url back into an image.

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

Example 2 - Custom colors

You can customise the color of the signature as follows.

$("#signature2").jSignature({color:"#f00"});

Example 3 - Custom line width

The line thickness of the strokes used for the signature can also be customised.

$("#signature3").jSignature({color:"#00f",lineWidth:5});

Example 4 - Custom dimensions

You can define the dimensions of the canvas. Although you can define the dimensions via CSS, defining it here will also specify the dimensions when the canvas is exported.

$("#signature4").jSignature({width:300,height:200});

Example 5 - Custom background

You can change the background as follows.

$("#signature5").jSignature({color:"#00f","background-color":"#0f0"});

home | portfolio | blog | links | contact
© 2014 - Brinley Ang
Valid xhtml