Angular 有一个签名板可以将其保存为图像吗？

Question

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

Answer 1

如果您进行谷歌搜索，您可以轻松找到许多满足您需求的库。我最近在使用这个签名板模块，所以我可以推荐它。

使用以下方法安装它：

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