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')