微信小程序用canvas實現(xiàn)電子簽名

第微信小程序用canvas實現(xiàn)電子簽名本文實例為大家分享了微信小程序用canvas實現(xiàn)電子簽名的具體代碼，供大家參考，具體內(nèi)容如下

view

view

canvasid="canvas"canvas-id="canvas"class="{{sysType==='iOS''canvas':'canvasbg000'}}"disable-scroll="true"bindtouchstart="canvasStart"bindtouchmove="canvasMove"bindtouchend="canvasEnd"touchcancel="canvasEnd"binderror="canvasIdErrorCallback"/canvas

/view

view

button

catchtap="cleardraw"清除簽名/button

button

catchtap="uploadImg"上傳簽名/button

/view

/view

varcontext=null;//使用wx.createContext獲取繪圖上下文context

varisButtonDown=false;//是否在繪制中

vararrx=[];//動作橫坐標(biāo)

vararry=[];//動作縱坐標(biāo)

vararrz=[];//總做狀態(tài)，標(biāo)識按下到抬起的一個組合

varcanvasw=0;//畫布寬度

varcanvash=0;//畫布高度

Page({

data:{

canvasw:'',

canvash:'',

imgUrl:'',

info:{},

signBase64:'',

sysType:''//判斷機型

onLoad:function(options){

letthat=this

letres=wx.getSystemInfoSync()

constsystem=res.system.split('')

that.setData({

sysType:system[0],

})

letparams=JSON.parse(options.params)

that.setData({

info:params,

})

that.startCanvas();

that.initCanvas()

/**

*以下-手寫簽名/上傳簽名

startCanvas(){//畫布初始化執(zhí)行

varthat=this;

//獲取系統(tǒng)信息

wx.getSystemInfo({

success:function(res){

canvasw=res.windowWidth;

canvash=res.windowHeight;

that.setData({canvasw:canvasw});

that.setData({canvash:canvash});

}

});

this.initCanvas();

this.cleardraw();

//初始化函數(shù)

initCanvas(){

context=wx.createCanvasContext('canvas');

context.beginPath()

if(this.data.sysType==='iOS'){

context.fillStyle='rgba(255,255,255,1)';

context.setStrokeStyle('#444');

}else{

context.fillStyle='rgba(0,0,0,1)';

context.setStrokeStyle('#aaa');

}

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

canvasStart(event){

isButtonDown=true;

arrz.push(0);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

canvasMove(event){

if(isButtonDown){

arrz.push(1);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

}

for(vari=0;iarrx.length;i++){

if(arrz[i]==0){

context.moveTo(arrx[i],arry[i])

}else{

context.lineTo(arrx[i],arry[i])

}

}

context.clearRect(0,0,canvasw,canvash);

if(this.data.sysType==='iOS'){

context.fillStyle='rgba(255,255,255,1)';

context.setStrokeStyle('#444');

}else{

context.fillStyle='rgba(0,0,0,1)';

context.setStrokeStyle('#aaa');

}

context.setLineWidth(3);

context.setLineCap('round');

context.setLineJoin('round');

context.stroke();

context.draw(false);

canvasEnd(event){

isButtonDown=false;

//清除畫布

cleardraw(){

arrx=[];

arry=[];

arrz=[];

context.clearRect(0,0,canvasw,canvash);

if(this.data.sysType==='iOS'){

context.fillStyle='rgba(255,255,255,1)';

context.setStrokeStyle('#444');

}else{

context.fillStyle='rgba(0,0,0,1)';

context.setStrokeStyle('#aaa');

}

context.draw(true);

uploadImg(){

varthat=this

//生成圖片

//context.draw(true,()={

setTimeout(()={

wx.canvasToTempFilePath({

canvasId:'canvas',

//設(shè)置輸出圖片的寬高

fileType:'jpg',

quality:1,

success:function(res){

//canvas圖片地址res.tempFilePath

letimgBase64=wx.getFileSystemManager().readFileSync(res.tempFilePath,'base64')

that.setData({

imgUrl:res.tempFilePath,

signBase64:imgBase64

})

that.submitSign()

console.log('imgBase64','data:image/jpeg;base64,'+imgBase64)

//wx.saveImageToPhotosAlbum({

//

filePath:res.tempFilePath,

//

success(res4){

//

console.log(res,'保存res4');

//

wx.showToast({

//

title:'已成功保存到相冊',

//

duration:2000

//

});

//

}

//})

},

fail:function(){

wx.showModal({

title:'提示',

content:'canvas生成圖片失敗。微信當(dāng)前版本不支持，請更新到最新版本！',

showCancel:false

});

},

complete:function(){}

},5000)

})

//})

//提交簽名

submitSign(){

letthat=this

wx.showLoading({

title:'正在提交...',

mask:true

})

lettype='1'

if(that.data.sysType==='iOS'){

type='0'

}else{

type='1'

}

wx.$getWxLoginCode(resp={

constparams={

qmbase64:that.data.signBase64,

}

("入?yún)?,params)

wx.kservice.yyyurl(params,res={

wx.hideLoading()

if(res.statusCode==='200'){

wx.showModal({

title:'提示',

content:res.message,

showCancel:false,

confirmText:'返回首頁',

success(res){

if(res.confirm){

wx.reLaunch({

url:'/pages/index/index'

})

}

}

})

}else{

wx.showModal({

title:'提示',

content:res.message,

showCancel:true,

cancelText:'返回首頁',

confirmText:'重新提交',

success:(result)={

if(result.cancel){

//取消停留

wx.reLaunch({

url:'/pages/index/index'

})

}elseif(result.confirm){

//重新提交

that.submitSign()

}

},

});