ionic3实现签名，并上传数据库

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，到此为止就行了，有问题下面提出来！