1.下载依赖

签名板
npm install angular2-signaturepad --save
appmodule.ts引入
import { SignaturePadModule } from 'angular2-signaturepad';// 签名插件

2. 使用

html使用

    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"
                #customerUsersignaturePad>
     </signature-pad>

TS 中定义

 @ViewChild('customerUsersignaturePad') customerUsersignaturePad: SignaturePad;
  private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 2,
    'canvasWidth': this.platform.width(),
    'canvasHeight': this.platform.height() * 0.6
  };

在手机屏幕上笔画结束后 会调用drawComplete（）方法，笔画刚开始调用drawStart（）方法，通过在drawComplete（）中调用 toDataURL（） 方法获取图片

   let img = this.customerUsersignaturePad.toDataURL(); //返回base64编码的图片

插件源码参考

import { ElementRef, EventEmitter } from '@angular/core';
export interface Point {
    x: number;
    y: number;
    time: number;
}
export declare type PointGroup = Array<Point>;
export declare class SignaturePad {
    options: Object;
    onBeginEvent: EventEmitter<boolean>;
    onEndEvent: EventEmitter<boolean>;
    private signaturePad;
    private elementRef;
    constructor(elementRef: ElementRef);
    ngAfterContentInit(): void;
    resizeCanvas(): void;
    toData(): Array<PointGroup>;
    fromData(points: Array<PointGroup>): void;
    toDataURL(imageType?: string, quality?: number): string;
    fromDataURL(dataURL: string, options?: Object): void;
    clear(): void;
    isEmpty(): boolean;
    off(): void;
    on(): void;
    set(option: string, value: any): void;
    onBegin(): void;
    onEnd(): void;
    queryPad(): any;
}

3.效果展示

image.png