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
- -
Support non-canvas browsers with flash, using something like http://www.azarask.in/blog/post/flash-canvas/
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"});
