微信小程序canvas实现签名(源码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--pages/page/cvsAutograph/cvsAutograph.wxml-->
<view class="wrapper">
  <view class="handBtn">
    <button class="backBtn">返回</button>
    <button catchtap="cleardraw" class="delBtn">清空</button>
    <button catchtap="getimg" class="subBtn">完成</button>
  </view>
  <view class="handCenter">
  <canvas class="canvas" style="height:{{cvsHeight=='100%'?cvsHeight:cvsHeight+'px'}}" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
    <cover-image class='overImg' src="{{src}}" wx:if="{{src!=''}}">
    </cover-image>
  </view>
  <view class="handRight">
    <view class="handTitle">签名板</view>
  </view>
</view>

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
/* pages/page/cvsAutograph/cvsAutograph.wxss */
page {
  background: #fbfbfb;
  height: auto;
  overflow: hidden;
}
canvas {
width:100%;
/* height:100%; */
}

.wrapper {
  width: 100%;
  height: 95vh;
  margin: 30rpx 0;
  overflow: hidden;
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  font-size: 28rpx;
}

/* .handWriting {
  background: #fff;
  width: 100%;
  height: 95vh;
} */

.handRight {
  display: inline-flex;
  align-items: center;
}

.handCenter {
  position: relative;
  border: 4rpx dashed #e9e9e9;
  flex: 5;
  overflow: hidden;
  box-sizing: border-box;
}
.overImg{
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.handTitle {
  transform: rotate(90deg);
  flex: 1;
  color: #666;
}

.handBtn button {
  font-size: 28rpx;
}

.handBtn {
  height: 95vh;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  flex: 1;
}
.backBtn{
  position: absolute;
  top: 50rpx;
  left: 0rpx;
  transform: rotate(90deg);
  color: #666;
}
.delBtn {
  position: absolute;
  top: 250rpx;
  left: 0rpx;
  transform: rotate(90deg);
  color: #666;
}


.subBtn {
  position: absolute;
  bottom: 52rpx;
  left: -3rpx;
  display: inline-flex;
  transform: rotate(90deg);
  background: #008ef6;
  color: #fff;
  margin-bottom: 30rpx;
  text-align: center;
  justify-content: center;
}

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
// canvas 全局配置
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽 
var canvash = 0;//画布的高
var top = 0;
var left = 0;
let app = getApp();
//注册页面
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  //绘制之前
  canvasStart: function (event) {
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //就算点击之后手指没有移动,那么下次要移动之前还是必定会先触发这个
  },
  //手指移动过程
  canvasMove: function (event) {
    context.moveTo(arrx[arrx.length - 1], arry[arrx.length - 1])
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
    context.setLineWidth(4);//设置线条的宽度
    context.setLineCap('round');//设置结束时 点的样式
    context.stroke();//画线
    context.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空
  },
  //手指离开
  canvasEnd: function (event) {

  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    // arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(false);
    this.setData({
      cvsHeight: "100%",
      src:''
    })
  },
  //导出图片
  getimg: function () {
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    wx.showLoading({
      title: '签名生成中..',
      mask:true
    })
    let that = this;
    //先拿到竖着的地址给image,挡住下面的操作!
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      // width: canvasw,
      // height: canvash,
      // destWidth: canvasw,
      // destHeight: canvasw * canvasw / canvash,
      success: function (res) {
        //把当前的图片放上去挡住,接着操作下面的canvas
        that.setData({
          src: res.tempFilePath,
          cvsHeight: canvasw * canvasw / canvash
        })
        context.clearRect(0, 0, canvasw, canvash);
        context.translate(0, canvasw/2.4);
        context.rotate(270 * Math.PI / 180);
        context.drawImage(res.tempFilePath, 0, 0,canvasw * canvasw / canvash, canvasw);
        context.draw(false, setTimeout(function () {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: result => {
              console.log(result.tempFilePath);
             //转成base64
              wx.getFileSystemManager().readFile({ 
                  filePath: res.tempFilePath, //选择图片返回的相对路径
                  encoding: 'base64', //编码格式
                  success: result => { //成功的回调
                    let base64 = result.data;    
                  }
              })  
              //全局变量,用于返回显示
              app.globalData.pages.cvsAutograph.autograph = result.tempFilePath;
              wx.navigateTo({
                url: '../index/index'
              })
              wx.hideLoading()
            }
          }, this)
        }, 100))
      }
    })

  },
  /**
   * 页面的初始数据
   */
  data: {
    src: "",
    cvsHeight:'100%',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath();

    var query = wx.createSelectorQuery();
    query.select('.handCenter').boundingClientRect(rect => {
      top = rect.top;
      left = rect.left;
      canvasw = rect.width;
      canvash = rect.height;
      wx.hideLoading()
    }).exec();
  }
})