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

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

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

微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...
微信小程序识别图片并提取文字_这款微信小程序可以批量图片转文字？识别准确率超高！...
在日常学习和生活中,我们都不乏会碰到那些需要将图片中的文字转换成可复制和编辑的内容的时候. 不管是书本还是电子文档又或者是电脑应用中的截图,其实都只要利用小编介绍的这个微信小程序就能轻松完成, 不仅能 ...
微信小程序开发：调用百度文字识别API实现图文识别
1.首先需要开通百度AI图文识别功能登录[百度智能云],创建应用,根据需要开通功能. 创建完成后,打开应用管理,查看已创建的应用的AppID,API Key,Secret Key. 2.小程序端的开 ...
微信小程序语音同步智能识别的实现案例
文章目录一.背景二.同声传译插件介绍 1. 微信小程序后台添加插件 2. 微信小程序启用插件三.语音同步转换的前端实现 1.界面UI与操作 2.代码实现四.后端SpringBoot实现语音文件 ...
小程序开发 - OCR 快速识别文字【共享源码】
利用周末时间开发一个简单的图片文字识别小程序应用,虽然简单也是经历个很多个坑,把爬坑经过分享给大家,希望对你有帮助微信小程序 -> 搜索 -> 快速识别文字服务端 - 购买域名.服务器 ...
微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦. 然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能. wx.scanCode(Object object) 调起客 ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...
h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
微信小程序——修改field输入框内文字颜色和背景图透明度调整
一.修改field输入框内的文字的颜色我用的vant组件,所以直接在页面写的样式,先上代码 <van-field custom-style="-webkit-text-fill-co ...

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

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

最新文章

热门文章