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
