This plugin provides a simple "pad" for requesting a user's signature which you can use in Cordova/Phonegap applications. For efficiency reasons, the pad is implemented natively where available (currently only for Android). A JavaScript fallback is provided for other platforms, as well as for desktop browsers (for ease of testing).
This works best with an "active" pen, to get the most detailed output. It captures normal "touch" events, so you could use it with a pressure pen or fingers, but the results won't be as accurate.
In principle, you could use the plugin as a generic drawing/sketch capturing system, but it provides no drawing "tools" of any kind.
This extension is a little strange in that it installs a file called
www/js/signature-view.js directly into your application. You can load
this and it will provide the AMD module cordova.signature-view. If
you're not using an AMD loader, it will define a global SignatureView
variable (a property on "window"). It provides only one method, with
the following signature (no pun intended):
:::javascript
SignatureView.getSignature(success, error, [title, [htmlPage]]);
The success argument is a callback function accepting one argument,
which is either null (in case the user canceled the dialog) or an
ImageData
object containing the raw binary image data.
The error argument is a callback function accepting one argument,
which is a string containing an error message indicating what went
wrong.
The title argument is an optional string which indicates what the
dialog should show as a heading.
The htmlPage argument is also an optional string which supplies a
full HTML page which will be presented in a webview above the
signature pad area. This allows you to place salient parts about the
agreement just above the signature, which should help ensure that the
user knows what they're signing. The base www directory is
configured as its base URI, so you can use assets from your
application.
Beware when converting the image data to a data URI: some mobile
browsers (and IE) have length limitations on data URIs. It's better
to use the image data with the canvas/2dcontext putImageData method
or something equivalent.
Here's a minimal working example. It assumes there's a CANVAS element
in your HTML document which has an id of signature.
:::javascript
var Signature = cordova.require('nl.codeyellow.signature.Signature');
Signature.getSignature(
function (imgData) {
/* This is the "success" callback. */
if (!imgData) return; // User clicked cancel, we got no image data.
var canvas = document.getElementById('signature'),
ctx = canvas.getContext('2d');
canvas.width = imgData.width;
canvas.height = imgData.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imgData, 0, 0);
}, function (msg) {
/* This is the "error" callback. */
alert('Could not obtain a signature due to an error: '+msg);
},
/* This final string is optional and defaults to a similar string. */
'Please put your signature down below');