小程序实现手写板签名小程序实现手写板签名

本文实例为大家分享了小程序实现手写板签名的具体代码，供大家参考，具体内容如下
1.wxss代码

page {background: #F8F8F8; }/* 签名 */.qianming {background: #fff; padding: 20rpx 30rpx; font-size: 32rpx; color: #333; padding-bottom: 0; position: fixed; bottom: 0; left: 0; width: 92%; height: 47%; }.qianming .clear {font-size: 26rpx; color: #669AF2; }.flex-def {display: flex; }.flex-one {flex: 1; }.flex-cCenter {align-items: center; }/* 底部按钮 */.bottom_btn {font-size: 32rpx; color: #fff; padding: 30rpx 0; background: #fff; width: 100%; }.bottom_btn view {width: 100%; background: #FF083C; border-radius: 40rpx; height: 80rpx; line-height: 80rpx; text-align: center; }/*隐藏滚动条*/::-webkit-scrollbar {width: 0; height: 0; color: transparent; display: none; }

2.wxml代码

签名清空我已知悉并同意

3.js代码

data: {context: null,imgUrl: "",index:0,//用来判断是否签名},/**记录开始点 */bindtouchstart: function (e) {this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)// 记录已经开始签名this.setData({index:1})},/**记录移动点，刷新绘制 */bindtouchmove: function (e) {this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y); this.data.context.stroke(); this.data.context.draw(true); this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y); // 记录已经开始签名this.setData({index:1})},/**清空画布 */clear: function () {this.data.context.draw(); this.setData({index:0})},/**导出图片点击确定按钮*/export: function () {const that = this; if (that.data.index==0) {wx.showToast({title: '请阅读并签名',icon: 'none',duration: 2000})return}that.data.context.draw(true,wx.canvasToTempFilePath({x: 0,y: 0,fileType: 'png',canvasId: 'firstCanvas',success(res) {that.upload_image(res.tempFilePath)},fail() {wx.showToast({title: '签名失败',icon: 'none',duration: 2000})}}))}},// 将图片保存到服务器upload_image(imgurl) {var that = this; },

4.注意json文件必须加这个参数为true，否则签名时晃动