微信小程序实现电子签名

网友投稿 458 2023-11-12

本文实例为大家分享了微信小程序实现电子签名的具体代码，供大家参考，具体内容如下

?
1
2
3
4
5
6
7
8
9
10
<view class="sign-contain">
<view class="signName">
<canvas id="canvas" canvas-id="canvas" class="{{ sysType === iOS ? canvas : canvas bg000}}" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
</view>
<view class="btn-wrap">
<button  catchtap="cleardraw">清除签名</button>
<button  catchtap="uploadImg">上传签名</button>
</view>
</view>

微信小程序实现电子签名

js：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
data: {
canvasw: ,
canvash: ,
imgUrl: ,
info: {},
signBase64: ,
sysType: // 判断机型
},
onLoad: function (options) {
let that = this
let res = wx.getSystemInfoSync()
const system = res.system.split()
that.setData({
sysType: system[0],
})
let params = JSON.parse(options.params)
that.setData({
info: params,
})
that.startCanvas();
that.initCanvas()
},
/**
* 以下 - 手写签名 / 上传签名
*/
startCanvas() {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函数
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 (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);
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() {
var that = this
//生成图片
// context.draw(true,()=> {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: canvas,
//设置输出图片的宽高
fileType: jpg,
quality: 1,
success: function (res) {
// canvas图片地址 res.tempFilePath
let imgBase64 = 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生成图片失败。微信当前版本不支持，请更新到最新版本！,
showCancel: false
});
},
complete: function () { }
}, 5000)
})
// })
},
// 提交签名
submitSign() {
let that = this
wx.showLoading({
title: 正在提交...,
mask: true
})
let type = 1
if(that.data.sysType === iOS) {
type = 0
} else {
type = 1
}
wx.$getWxLoginCode(resp => {
const params = {
qmbase64: that.data.signBase64,
}
console.info("入参", 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
})
} else if (result.confirm) {
//重新提交
that.submitSign()
}
},
});
}
}, {}, true, true)
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

CSS：

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

您可能感兴趣的文章:微信小程序实现横屏手写签名微信小程序实现手写签名(签字版)微信小程序实现手写签名微信小程序canvas实现手写签名微信小程序实现横屏和竖屏签名功能微信小程序实现电子签名功能java遇到微信小程序 "支付验证签名失败" 问题解决微信小程序实现简单手写签名组件的方法实例微信小程序实现电子签名并导出图片微信小程序用canvas实现电子签名

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 实例
上一篇:微信小程序引入外部icon(阿里巴巴矢量图标)的全过程
下一篇:微信小程序选择器组件picker简单入门
相关文章

 发表评论

暂时没有评论，来抢沙发吧~