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

最新推荐文章于 2025-09-24 16:20:18 发布

原创

最新推荐文章于 2025-09-24 16:20:18 发布 · 3.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript

本文介绍了一种基于canvas的手写签名实现方案，通过触摸事件捕捉用户笔迹，并提供了清除和保存签名的功能。同时，文章提及了尝试集成OCR文字识别功能的过程及遇到的问题。

该功能主要用到了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="canvasE