1.下载组件
npm install angular2-signaturepad --save
2.app.module.ts中引入插件:
在所需的页面的module.ts文件引入组件(如下图)，
image.png
3、在要使用签名功能的页面使用：
在signature.html中：
<ion-header>
<ion-navbar color="primary">
<ion-title>
手写意见/签名
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="normal-page">
<div class="footer">
<div class="right-sign">
<span style="margin-left: 10px;">签名：</span><span style="float:right;margin-right: 10px;color:blue;" (click)='drawClear()'>清除</span>
<signature-pad [options]="signaturePadOptions" id="signatureCanvas"></signature-pad>
</div>
<button ion-button icon-left [disabled]="startButtonStatus" [block]="true" color="primary" block
(click)="signBack()">
<ion-icon name="arrow-dropright"></ion-icon>提交
</button>
</div>
</div>
</ion-content>
在signature.module.ts中引入：
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignaturePage } from './signature';
import {SignaturePadModule} from 'angular2-signaturepad';
@NgModule({
declarations: [
SignaturePage,
],
imports: [
SignaturePadModule,
IonicPageModule.forChild(SignaturePage),
],
})
export class SignaturePageModule {}
在signature.scss中
···
page-signature {
signature-pad {
canvas {
border: dashed 1px #cccccc;
width: 100%;
height: 120px;
}
}
}
···
在signature.ts中
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';//引入手写板
@IonicPage()
@Component({
selector: 'page-signature',
templateUrl: 'signature.html',
})
export class SignaturePage {
@ViewChild(SignaturePad) public signaturePad: SignaturePad; //第二视图
signatureImage: string; //定义类型
signaturePadOptions: Object = {
'minWidth': 2,
'canvasWidth': 220,
'canvasHeight': 120
};
constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log(this.navParams)
}
ionViewDidLoad() {
console.log('ionViewDidLoad QuestionnairePage');
}
ngAfterViewInit() {
this.signaturePad.clear();
this.canvasResize();
}
// 清除模板
drawClear() {
this.signaturePad.clear();
}
canvasResize() {
let canvas = document.querySelector('canvas');
this.signaturePad.set('minWidth', 2);
this.signaturePad.set('canvasWidth', canvas.offsetWidth);
this.signaturePad.set('canvasHeight', canvas.offsetHeight);
}
// 完成生成图片
/*drawComplete(sign) {
this.signatureImage = this.signaturePad.toDataURL();
console.log(this.signatureImage);
}*/
signBack(){
let result=[];
result.push({
url:this.signatureImage = this.signaturePad.toDataURL("image/png")
})
this.navCtrl.pop().then(() => {
this.navParams.get('callback2')(result);
});
}
}
4、这个界面专门签名的界面，还要上传，上传我在另外一个页面，关键代码如下
let picUrl = that.signUrl.replace(/^data:image\/(png|jpg);base64,/, "") //传递的BASE64图片必须把头去掉
//console.log(that.signUrl);
let params = new HttpParams()
.set('processTodoDealwithMan',that.processDealwithMan)
.set('mySuggestion',that.mySuggestion)
.set('nextActivityJsonInfo',nextActivityInfo)
.set('signPic',encodeURIComponent(picUrl))
.set('loginFrom', 'app');
let url=GlobalVariable.BASE_URL + 'pad.do?method=completeTask';
let loading = this.loadingCtrl.create({
content: '正在保存……'
});
loading.present();
that.appService.POST(url,params,(res, error) => {
if(res){
loading.dismiss();
let result=res['msg'];
if(result=='Y'){
this.appService.alert("流程已成功处理！");
that.navCtrl.pop().then(() => {
let msg="Y";
this.navParams.get('callback')(msg);
});
}else{
this.appService.alert("流程数据异常，请在电脑端处理！")
}
}
if(error){
loading.dismiss();
console.log("PUT call in error");
}
});
关键代码解析：
1、let picUrl = that.signUrl.replace(/^data:image/(png|jpg);base64,/, "") //传递的BASE64图片必须把头去掉，因为我们要将base64的图片转成文件进行存储
2、 .set('signPic',encodeURIComponent(picUrl))
base64里面有一些特殊字符，比如+，必须encode掉，否则系统默认会将+变成空格。还有一种办法是，在后端replace空格成+号，不过不是很推荐。
下面是后台代码：
//base64字符串转化成图片
public static boolean GenerateImage(String imgStr, String serverPath,String fileName)
{ //对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) //图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try
{
//Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//调整异常数据
b[i]+=256;
}
}
//生成图片
String imgFilePath = serverPath+fileName; //新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
}
catch (Exception e)
{
return false;
}
}
if(StringUtils.isNotBlank(signPic)){
signPic=java.net.URLDecoder.decode(signPic,"UTF-8");
System.out.println(signPic);
String path = "attachment/ProcessAttachment/signImg/";
String uuid = UUID.randomUUID().toString().replace("-", "").toLowerCase();
Boolean hasUploadImg=AttachmentHelper.GenerateImage(signPic, serverPath,uuid+".png");
if(hasUploadImg){
processSuggest.setSuggest(path+uuid+".png");
processSuggest.setSignType("2"); //代表签名
}
}else{
processSuggest.setSuggest(mySuggestion);
processSuggest.setSignType("1"); //代表输入
}
OK，到此为止就行了，有问题下面提出来！
网友评论