angular2集成手写签名

项目中设计到审核功能,在审核的时候需要审核人进行一个签名,这里使用的angular2-signaturepad,集成的时候可以使用npm安装

npm install angular2-signaturepad -- save

安装完成之后,在模块中导入

import { SignaturePadModule } from 'angular2-signaturepad';

组件引入

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

画布初始化

 signatureImage: string;
  private signaturePadOptions: Object = {
    minWidth: 0.5,// 比划的粗细,
    canvasWidth: 545, // 可写宽度
    canvasHeight: 200,// 可写高度
  };
  canvasResize() {
    const canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 0.2);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeight', canvas.offsetHeight); 
  }

生成图片

drawComplete() {
    this.signatureImage = this.signaturePad.toDataURL();
  }
```