小程序canvas电子签名
签名此处利用的是横屏需要在json文件中添加
"pageOrientation": "landscape"
<view class='container'>
<!-- 签名画布 -->
<view style="width:{{width}}px;height:{{height}}px;border: 3rpx solid #000000;">
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" style="width:{{width}}px;height:{{height}}px">
</canvas>
</view>
<view class='buttonBox'>
<button bindtap='save' class='surebutton' open-type="getuserinfo">确定</button>
<button type="default" class='emptybutton' bindtap="emptydraw">清除</button>
</view>
</view>
//全局配置
const app = getApp()
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注册页面
Page({
data: {
'width':'',
'height':''
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
//开始
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
onLoad: function (options) {
canvasw = wx.getSystemInfoSync().windowWidth;
canvash = wx.getSystemInfoSync().windowHeight*0.8;
this.setData({
'height':wx.getSystemInfoSync().windowHeight*0.8,
'width':wx.getSystemInfoSync().windowWidth
})
context = wx.createCanvasContext('canvas');
context.beginPath()
context.draw();
},
//绘画过程过程
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
};
for (var i = 0; i < arrx.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);//设置坐标和宽高
context.setStrokeStyle('black');//设置或返回用于笔触的颜色、渐变或模式。
context.setFillStyle('#fff')
context.fillRect(0, 0, this.data.width, this.data.width)
context.setLineWidth(4);//设置或返回当前的线条宽度
context.setLineCap('round');//设置或返回线条的结束端点样式。
context.setLineJoin('round');//设置或返回两条线相交时，所创建的拐角类型。
context.stroke();//绘制已定义的路径。
context.draw(true);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除画布
emptydraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
// 点击保存签名图片
save: function () {
var that = this;
if (arrx.length == 0) {
wx.showModal({
content: '签名内容不能为空！',
showCancel: false
});
return false;
};
wx.canvasToTempFilePath({
canvasId: 'canvas',
fileType: 'jpg',
success: function (res) {
wx.uploadFile({
url: url, //接口地址
header: {
"Content-Type": "multipart/form-data",
'Accept': 'application/json'
},
filePath: res.tempFilePath,
name: 'file',
formData: {
},
success: function (res) {
}, (error) => {
console.log(error)
})
}
}
});
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/signature/signature.wxss */
.container{
padding: 2.5% 0;
}
.canvas {
position: fixed;
box-sizing: border-box;
}
.imageCanvas{
width: 100%;
height: 300rpx;
}
.buttonBox{
width: 100%;
justify-content: center;
display: flex;
position: fixed;
bottom: 0;
left: 0;
}
.surebutton{
color: black;
background-color: aquamarine;
}
.emptybutton{
color: aqua !important;
background-color: rgb(32, 85, 121) !important;
}
