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