Skip to content

ti-ka/angular-signature-pad

Repository files navigation

Angular Signature Pad

See Demo on Stackblitz

Installation:

npm install @ng-plus/signature-pad --save

Usage (Blob/Image):

<ng-signature-pad (done)="saveImage($event)"></ng-signature-pad>

JavaScript:

saveImage(blob: Blob) {
    // Do something with the blob.
}

Options:

Directives Description Options Default
[editable] Turn pad on or off true, false true
[emitOnDragEnd] Emit the (done) method as soon as drag end. true, false false
[penColor] Color of signature pen Color black
[backgroundColor] Background of signature pad Color transparent
(done) Fired on clicking Done button function($event: Blob/base64/json) null
(clear) Fired on clicking Clear button function() null
[(points)] JSON points model json null
[format] Output format foe (done) method. json output is same as points model. blob, base64, json blob
[width] Width of canvas number 600
[height] Height of canvas number 150
[responsive] Resize to 100% parent. But the points will still output widthxheight ratio true, false true
[showDoneButton] Show or Hide Done Button true, false true
[showClearButton] Show or Hide Clear Button true, false true
[doneButtonText] Text of Done Button string Done
[clearButtonText] Text of Clear Button string Clear
[doneButtonClass] Class classes of Done Button string btn btn-primary
[clearButtonClass] Class classes of Clear Button string btn btn-default