CODEWITHSUNDEEP
angular
DevTool
DevTool

Reputation: 319

There is a signature pad for Angular that save it to image?

I need to make a signature pad and save it. I work on enterprise site and i need to save signature per user. What the best package for this?

Upvotes: 5

Views: 12918

Answers (1)

Thilina Koggalage
Thilina Koggalage

Reputation: 1084

If you do a google search you can easily find many libraries for your requirement. I recently use this signaturepad module so I can recommend it.

Install it using: 

npm install angular2-signaturepad --save

Then import it in your app.module.ts.

import { SignaturePadModule } from 'angular2-signaturepad';

Then add it to imports:

@NgModule({
    imports: [
              SignaturePadModule
             ]
})

You can call the directive in your html like this:

<signature-pad [options]="signaturePadOptions"  id="signatureCanvas"></signature-pad>

In your .ts file you can define its behaviors like this.

import { Component, ViewChild } from 'angular2/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
  template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
})

export class SignaturePadPage{

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() {
    // no-op
  }

  ngAfterViewInit() {
    this.signaturePad.set('minWidth', 5);
    this.signaturePad.clear();
  }

  drawComplete() {
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    console.log('begin drawing');
  }
}

Upvotes: 9

Related Questions