NgxSignaturepad2

Angular 12 component for szimek/signature_pad.

Install

npm install ngx-signaturepad2 --save

Reference Implementation

• Source

Usage example

API is identical to szimek/signature_pad.

Inputs:

• options are as per szimek/signature_pad
• width: width of the canvas (px)
• height: height of the canvas (px)

// import into app module
import { NgxSignaturepadModule } from 'ngx-signaturepad2';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxSignaturepadModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
// then import for use in a component
import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('signaturePad', { static: false }) signaturePad;
  width: number = 600;
  height: number = 300;
  options: any = null;
  constructor() { }
  isEmpty() {
    console.log('is empty', this.signaturePad.isEmpty());
  }
  savePng() {
    const data = this.signaturePad.toDataURL();
    console.log(data);
  }
  saveJpg() {
    const data = this.signaturePad.toDataURL("image/jpeg");
    console.log(data);
  }
  saveSvg() {
    const data = this.signaturePad.toDataURL("image/svg+xml");
    console.log(data);
  }
  saveArray() {
    const data = this.signaturePad.toData();
    console.log(data);
    console.log(JSON.stringify(data));
  }
  clear() {
    console.log('clear');
    this.signaturePad.clear();
  }
  changeOptions() {
    console.log('options changed');
    this.options = {
      minWidth: 5,
      maxWidth: 10,
      penColor: "rgb(66, 133, 244)"
    };
  }
  setSigArray() {
    let jsonString = '[{"color":"rgb(66, 133, 244)","points":[{"time":1582940095394,"x":267,"y":116}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940096537,"x":297,"y":115}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940097774,"x":239,"y":135},{"time":1582940097853,"x":240,"y":141},{"time":1582940097885,"x":242,"y":148},{"time":1582940097918,"x":244,"y":153},{"time":1582940097983,"x":248,"y":158},{"time":1582940098033,"x":252,"y":162},{"time":1582940098064,"x":257,"y":165},{"time":1582940098112,"x":264,"y":167},{"time":1582940098144,"x":271,"y":167},{"time":1582940098177,"x":284,"y":168},{"time":1582940098210,"x":295,"y":168},{"time":1582940098244,"x":302,"y":165},{"time":1582940098277,"x":309,"y":161},{"time":1582940098311,"x":315,"y":156},{"time":1582940098343,"x":322,"y":148},{"time":1582940098376,"x":325,"y":142},{"time":1582940098392,"x":330,"y":136},{"time":1582940098442,"x":333,"y":131}]}]';
    this.signaturePad.fromData(JSON.parse(jsonString));
  }
  //
  setSigString() {
    this.signaturePad.fromDataURL("data:image/png;base64,iVBORw...");
  }
}

HTML:

```html