angular - Angular有一个签名板可以将其保存到图像中吗？

Question

我需要制作一个签名板并保存它。
我在企业网站上工作，我需要为每个用户保存签名。
什么是最好的包装？

Answer 1

如果您进行谷歌搜索，您可以轻松找到许多满足您要求的库。
我最近用this signaturepad 模块，所以我可以推荐它。

安装它使用:

npm install angular2-signaturepad --save

然后将其导入您的 app.module.ts。

import { SignaturePadModule } from 'angular2-signaturepad';

然后将其添加到导入中:

@NgModule({
    imports: [
              SignaturePadModule
             ]
})

您可以像这样在 html 中调用该指令:

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

在您的 .ts 文件中，您可以像这样定义它的行为。

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');
  }
}