Polymer element for handwritten signatures
$ bower install hand-signature --save
<link rel="import" href="hand-signature.html">
<hand-signature></hand-signature>
Adding a title:
<hand-signature>
<h1>Please sign below</h1>
</hand-signature>
In order to get the signature image, you can bind the data
attribute to a property of your element.
While the user is signing, the property will be updated with the image data encoded in base64.
<polymer-element name="hand-signature-demo">
<template>
<hand-signature data="{{signature}}"></hand-signature>
</template>
<script>
Polymer('hand-signature-demo', {
signatureChanged: function (oldValue, newValue) {
// The newValue contains the image data
}
});
</script>
</polymer-element>
Attribute | Description | Default |
---|---|---|
format | Image format | png |
data | Bound to the image data | undefined |
width | Width of the element | 200px |
height | Height of the canvas | 200px |
lineColor | Line color | #212121 |
lineJoin | Line join | mitter |
lineWidth | Line width (in pixels) | 2 |
backgroundColor | Canvas background color | white |
clearable | Allow the signature to be cleared | true |
- Chrome 24+
- Internet Explorer 11+
- Firefox 24+
- Safari 6.1+
- Opera 16+