该功能主要用到了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; },
