@o.krucheniuk/ngx-signature-pad

Angular 9 library for drawing smooth signatures, based on [signature_pad](https://www.npmjs.com/package/signature_pad).

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@o.krucheniuk/ngx-signature-pad
0.0.74 years ago4 years agoMinified + gzip package size for @o.krucheniuk/ngx-signature-pad in KB

Readme

NgxSignaturePad
Angular 9 library for drawing smooth signatures, based on signaturepad.

Usage:

Install package npm i @o.krucheniuk/ngx-signature-pad -D

Import NgxSignaturePadModule into app.module.ts

`import {NgxSignaturePadModule} from '@o.krucheniuk/ngx-signature-pad'; imports:
SharedModule,
BrowserModule,
NgxSignaturePadModule
,`

Use component:

Add into app.component.html :

<ngx-signature-pad [config]="config" #testPad></ngx-signature-pad>

Add into app.component.ts:

@ViewChild('testPad', {static: true}) signaturePadElement: NgxSignaturePadComponent; `config: SignaturePadOptions = { minWidth: 1, maxWidth: 10, penColor: 'blue' };`

Stackblitz example

https://stackblitz.com/edit/ngx-signature-pad

API

API is accessable via this.signaturePadElement

Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)

toDataURL(); // save image as PNG toDataURL("image/jpeg"); // save image as JPEG toDataURL("image/svg+xml"); // save image as SVG // Draws signature image from data URL. // NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly. fromDataURL("data:image/png;base64,iVBORw0K..."); // Returns signature image as an array of point groups toData(); // Draws signature image from an array of point groups fromData(data); // Clears the canvas clear(); // Returns true if canvas is empty, otherwise returns false isEmpty(); // Unbinds all event handlers off(); // Rebinds all event handlers on(); // Force re-render of the signature canvas. Method also clears canvas forceUpdate(); Config options dotSize : (float or function) Radius of a single dot. minWidth: (float) Minimum width of a line. Defaults to 0.5. maxWidth: (float) Maximum width of a line. Defaults to 2.5. throttle: (integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16. minDistance: (integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5. backgroundColor: (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images. penColor: (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black". velocityFilterWeight: (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

Notes:

Canvas used for drawing is responsive. To limit it size add static dimensions for parent element of ngx-signature-pad