<view>
<view class="popcont">
<view class="wricont">
<canvas class="canvastyle" type="2d" id='canvasId' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
</view>
<view class="writebox" >
<button type="info" custom-class="cusstyle" plain round bindtap="clear">清除</button>
<view style="width: 60rpx;"></view>
<button type="info" custom-class="cusstyle" style="background-color: #404EDA; color: white;" round bindtap="export">确认签字</button>
</view>
</view>
</view>
const util = require('../../../../utils/util')
const req = require('../../../../interface/mineInterface')
const app = getApp()
Page({
data: {
flagMove:false,
context:null,
gid:'',
canvas:''
},
onLoad: function (options) {
this.setData({
gid:options.gid
})
wx.createSelectorQuery()
.select('#canvasId')
.fields({
node: true,
size: true,
})
.exec(this.init.bind(this))
},
init(res){
const width = res[0].width
const height = res[0].height
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
this.setData({
context: ctx,
canvas:canvas
})
},
bindtouchstart(e) {
this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
},
bindtouchmove(e) {
this.setData({
flagMove:true,
})
this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
this.data.context.stroke();
this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
},
clear() {
this.data.context.beginPath();
this.data.context.clearRect(0, 0, 600, 700);
this.data.context.stroke();
this.setData({
flagMove:false,
})
},
export() {
const that = this;
if(!that.data.flagMove){
console.log('签名获取失败,请稍后重试');
return;
}
wx.canvasToTempFilePath({
x: 0,
y: 0,
fileType: 'png',
canvasId: 'canvasId',
canvas:this.data.canvas,
success:res=> {
const { tempFilePath } = res;
console.log('手写签名,签字图片',tempFilePath)
this.upload(tempFilePath)
},
fail() {
wx.showToast({
title: '签名提交失败',
icon: 'none',
duration: 2000
})
}
})
},
upload(img){
let data={
filePath:img,
gid:this.data.gid
}
req
.imgUpload(data)
.then(res=>{
if(res.data.code==1000){
wx.showModal({
confirmColor: util.changeColor(0),
showCancel: false,
content: '上传成功!',
success:res=>{
wx.navigateBack()
}
})
}
})
},
})