微信小程序电子签名实现并识别文字

该功能主要用到了canvas画布实现，先说明本地测试会卡顿，但是部署到测式服务器或生产环境后，就很流畅了,这一点无须担心。下面贴一些关键代码，变量啥的我没删，项目完成半年多了，在此记录一下, 我的签名是白底黑字,可以修改canvas属性自定义，导出图片方法里注释掉的一堆代码，是使用百度的智能识别签名图片上的文字，不过测试后识别率很低，评估之后取消了此需求，没有删除（以防万一，二次开发提需求。。。）有的可以识别出来，不过不尽人意啊，如果你有次功能，需要在百度只能识别上面注册，第一个请求url，需要包含grant_type，client_id和client_secret，请求成功后返回一个token，第二个接口url拼接access_token等于返回的token，教程里都有

wxml

<!-- 弹窗里放画布 -->
		<view wx:if='{{showSignature}}' class="drawContainer">
				<view style="display:flex;justify-content: space-between">
				  <button style="margin-top:10rpx" type="default" bindtap="closeCanvas">关闭</button>
					<button style="margin-top:10rpx" type="default" bindtap="cleardraw">清空</button>
					<button style="margin-top:10rpx" type="default" bindtap="getimg">确定</button>
				</view>
				<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
		</view>

js

onLoad: function (options) {

    context = wx.createCanvasContext('canvas');
    context.beginPath()
    context.setFillStyle('white');
    context.fillRect(0, 0, 800 , 457 )
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },



//开始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);

  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  closeCanvas: function () {
    this.cleardraw();
    this.setData({
      showSignature : false
    })
  },


//生成图片
      setTimeout(function(){
        wx.canvasToTempFilePath({
          canvasId: 'canvas',
          success: function (res) {
            //  var imgUrl = "";
            //  var tempFilePath = res.tempFilePath;
            //  wx.getFileSystemManager().readFile({
            //    filePath:tempFilePath,
            //    encoding:'base64',
            //    success(res){
            //       imgUrl = res.data;
            //       wx.request({
            //         url: '',
            //         method:'post',
            //         header:{
            //           "sessionKey": app.globalData.sessionKey
            //         },
            //         success(res1){
            //           var token = res1.data.access_token;
            //           wx.request({
            //             url: '',
            //             method:'post',
            //             dataType:'json',
            //             header:{
            //               "sessionKey": app.globalData.sessionKey,
            //               "Content-Type":	'application/x-www-form-urlencoded'
            //             },
            //             data:{
            //              "image":imgUrl
            //             },
            //             success(res2){
            //               console.log(res2)
            //             }
            //           })
            //         }
            //       })
            //    }
            //  })
             that.setData({
              drawImg:res.tempFilePath,
              showSignature:false
             })
          }
        })
      })

//过程
  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('#000000');
    context.setFillStyle('white');
    context.fillRect(0, 0, 800 , 457 )
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();

    context.draw(false);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },