Namespace: Signature

Signature

Signature capture and display.

Depends on jquery.ui.widget, jquery.ui.mouse.

Expects HTML like:

<div></div>
Source:

Example

$(selector).signature()
$(selector).signature({color: 'blue', guideline: true})

Extends

  • $.Widget

Members

(static) options

Global defaults for signature.
Properties:
Name Type Attributes Default Description
distance number <optional>
0 The minimum distance to start a drag.
background string <optional>
'#fff' The background colour.
color string <optional>
'#000' The colour of the signature.
thickness number <optional>
2 The thickness of the lines.
guideline boolean <optional>
false true to add a guideline.
guidelineColor string <optional>
'#a0a0a0' The guideline colour.
guidelineOffset number <optional>
50 The guideline offset (pixels) from the bottom.
guidelineIndex number <optional>
10 The guideline indent (pixels) from the edges.
notAvailable string <optional>
'Your browser doesn\'t support signing' The error message to show when no canvas is available.
scale number <optional>
1 A scaling factor for rendering the signature (only applies to redraws).
syncField string | Element | jQuery <optional>
null The selector, DOM element, or jQuery object for a field to automatically synchronise with a text version of the signature.
syncFormat string <optional>
'JSON' The output representation: 'JSON', 'SVG', 'PNG', 'JPEG'.
svgStyles boolean <optional>
false true to use the style attribute in SVG.
change SignatureChange <optional>
null A callback triggered when the signature changes.
Source:
Example
$.extend($.kbw.signature.options, {guideline: true})

Methods

(static) clear(init)

Clear the signature area.
Parameters:
Name Type Description
init boolean true if initialising - internal use only.
Source:
Example
$(selector).signature('clear')

(static) draw(sig)

Draw a signature from its JSON or SVG description or data: URL.

Note that drawing a data: URL does not reconstruct the internal representation!

Parameters:
Name Type Description
sig object | string An object with attribute lines being an array of arrays of points or the text version of the JSON or SVG or a data: URL containing an image.
Source:
Example
$(selector).signature('draw', sigAsJSON)

(static) isEmpty() → {boolean}

Determine whether or not any drawing has occurred.
Source:
Returns:
true if not signed, false if signed.
Type
boolean
Example
if ($(selector).signature('isEmpty')) ...

(static) toDataURL(typeopt, qualityopt) → {string}

Convert the captured lines to an image encoded in a data: URL.
Parameters:
Name Type Attributes Default Description
type string <optional>
'image/png' The MIME type of the image.
quality number <optional>
0.92 The image quality, between 0 and 1.
Source:
Returns:
The signature as a data: URL image.
Type
string
Example
var data = $(selector).signature('toDataURL', 'image/jpeg')

(static) toJSON() → {string}

Convert the captured lines to JSON text.
Source:
Returns:
The JSON text version of the lines.
Type
string
Example
var json = $(selector).signature('toJSON')

(static) toSVG() → {string}

Convert the captured lines to SVG text.
Source:
Returns:
The SVG text version of the lines.
Type
string
Example
var svg = $(selector).signature('toSVG')