有一个用于Angular的签名板，可以将其保存到图像吗? [英] 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?

推荐答案

如果您执行Google搜索，则可以轻松找到许多满足您需求的库.我最近使用了此签名板模块，因此我推荐它.

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.

使用以下命令安装它:

npm install angular2-signaturepad --save

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

Then import it in your app.module.ts.

import { SignaturePadModule } from 'angular2-signaturepad';

然后将其添加到导入中:

Then add it to imports:

@NgModule({
    imports: [
              SignaturePadModule
             ]
})

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

You can call the directive in your html like this:

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

在.ts文件中，您可以定义其行为.

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

这篇关于有一个用于Angular的签名板，可以将其保存到图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！