README

blinkmobile / angular-signature-pad

AngularJS 1.x component for smooth canvas based signature drawing

This component does not apply any styling, it only places the canvas and allows you to bind your component to the signature pad by exposing the functionality provided by signature_pad. This means you must execute the exposed functions from your own buttons, events etc...

Installation

Install this module, canvas-manipulation and signature_pad using npm

npm install @blinkmobile/angular-signature-pad @blinkmobile/canvas-manipulation@1.x signature_pad@1.x --save

Add the module to your app

angular.module('app', [
  'bmSignaturePad',
]);

Ensure these three modules are loaded e.g.

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="node_modules/signature_pad/dist/signature_pad.js"></script>
  <script src="node_modules/@blinkmobile/canvas-manipulation/dist/canvas-manipulation.js"></script>
  <script src="node_modules/@blinkmobile/angular-signature-pad/dist/angular-signature-pad.js"></script>
</head>
<body>
  ...
</body>
</html>

Usage

Basics

<!--
  Note the use of CSS to manage the width and height of the component
  instead of managing the width and height of the canvas element
-->
<bm-signature-pad ng-model="$ctrl.signature" style="width:100%;height:100px"></bm-signature-pad>

<button ng-click="$ctrl.signature = undefined">Clear</button>

<img ng-show="$ctrl.signature"
     ng-src="{{ $ctrl.signature }}"></img>

Attributes

All attributes are optional with the exception of ngModel

Attribute	Value	Comments
`ng-model`	String	Reference to bind value of signature pad to. When `ngModel` is set, `crop`, `image-type` and `image-encoder` attribute values will be used. `ngModel` is set to a DataUrl. Will be set to `undefined` if the canvas is empty If the value of the `crop` attribute is truthy, the signature will be cropped of white space before generating a DataUrl Otherwise the DataUrl will contain the entire canvas
`options`	Object	All signature_pad options are valid.
`crop`	Expression	Return a truthy value if the signature should be cropped of white space when `ngModel` is set.
`image-type`	Expression	Return an image type to use when `ngModel` is set. See HTMLCanvasElement.toDataUrl() type parameter for options and default
`image-encoder`	Expression	Return an image encoder to use when `ngModel` is set. See HTMLCanvasElement.toDataUrl() encoderOptions parameter for options and default
`scale-down`	Expression	Return a truthy value if the signature should be scaled down when calling the function exposed via `resize`.
`resize`	Expression	Exposes the `resize()` function provided by @blinkmobile/canvas-manipulation as `$fn`. However, the `width` and `height` will be set to width and height of the canvas' parent element and the `scaleDown` argument will be set to the value of the `scale-down` attribute.

Recommendations

Use CSS to manage the width and height of the <bm-signature-pad> element. During intialisation, the dimensions of the <canvas> element will be set to the dimensions of the <bm-signature-pad> element. If the dimensions of <bm-signature-pad> element change for any reason (e.g. browser resize or orientation change on a mobile device) make use of the exposed resize() function which will reset the width and height attributes of the <canvas> element. See the Hosted Example to see this in action. For more details regarding Canvas elements, see Sizing The Canvas

The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size. If your renderings seem distorted, try specifying your width and height attributes explicitly in the
If you would like the background of the canvas to be something other than transparent, use CSS to change the background instead of setting the options.backgroundColor. Setting this option will prevent cropping from working correctly.

Example

Hosted Example

Note: The examples make use of a resize event on the window object and also $scope.$watch a DOM element property. Both of these practices are valid JavaScript and AngularJS, however, neither are ideal in production circumstances.

For more details on the resize event, see Event Reference: resize:

Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.

For more details on $scope.$watch best practices, see Scope $watch Performance Considerations:

Dirty checking the scope for property changes is a common operation in Angular and for this reason the dirty checking function must be efficient. Care should be taken that the dirty checking function does not do any DOM access, as DOM access is orders of magnitude slower than property access on JavaScript object.

Running Example Locally

Install Node 10.x or higher
Clone this repository

Note: The master branch can contain undocumented or backward compatibility breaking changes. You should checkout the latest release before running the demo.
Install dependencies
```
npm install
```
Start demo
```
npm start
```
Open http://localhost:8080/docs/ in your browser

Usage no npm install needed!