前言

小程序实现签名并保存图片，主要的通过canvas来实现

1
2
3
4
5
6
7
8
9
10
<!--pages/sign/sign.wxml-->
<view class='container'>
<!-- 签名画布 -->
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">
</canvas>
<view class='buttonBox'>
<button bindtap='clickMe' class='addbutton' open-type="getuserinfo">点击我生成图片保存相册</button>
<button type="default" class='delbutton' bindtap="cleardraw">清除</button>
</view>
</view>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* pages/sign/sign.wxss */
.canvas {
  width: 100%;
  height: 93%;
  border-bottom: 1rpx solid #e2e2e2e2;  
  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;
}

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
// canvas 全局配置
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注册页面
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
//开始
canvasStart: function (event) {
console.log("start", event.changedTouches[0])
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
console.log("")
},
data: {
src: "",
img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",
rpx: ''
},

onLoad: function (options) {
var that = this
// 使用 wx.createContext 获取绘图上下文 context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');

// context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
context.draw();
},

//过程
canvasMove: function (event) {
var that = this
if (isButtonDown) {
arrz.push(1);
console.log(event)
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('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();

context.draw(false);
},
// 点击保存图片
clickMe: function () {
wx.canvasToTempFilePath({
canvasId: 'canvas',
fileType: 'jpg',
success: function (res) {
console.log(res)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res)
wx.hideLoading();
wx.showToast({
title: '保存成功',
});
// //存入服务器
// wx.uploadFile({
//   url: 'a.php', //接口地址
//   filePath: res.tempFilePath,
//   name: 'file',
//   formData: {                                 //HTTP 请求中其他额外的 form data 
//     'user': 'test'
//   },
//   success: function (res) {
//     console.log(res);

//   },
//   fail: function (res) {
//     console.log(res);
//   },
//   complete: function (res) {
//   }
// });
},
fail() {
wx.hideLoading()
}
})
}
})
},
canvasEnd: function (event) {
isButtonDown = false;
},
cleardraw: function () {
//清除画布
arrx = [];
arry = [];
arrz = [];
context.draw(false);
}
})