NgSignature

This library was generated with Angular CLI version 15.1.0.

Installation:

npm i ng-signature

Usage (Blob/Image) Component.html:

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

Component.ts:

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

app.module.ts:

import { NgSignatureModule } from "ng-signature";

@NgModule({
  declarations: [],
  imports: [NgSignatureModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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 |