最近老是有同学问我小程序ocr识别的问题，就趁机研究了下，实现了小程序识别身份证，银行卡，驾照，营业执照，图片文字的功能。今天来给大家讲讲详细的实现流程。

先画一张流程图出来

第一次看到这个流程图，可能有点萌，什么云开发，云函数。。。。
不要着急，我们接下来会一步步带大家实现。

先看下我们的页面和效果图。

功能其实很简单，就是我们点对应的按钮后，去拍照或者去相册选择对应的图片。然后把图片上传到云存储，会有一个对应的图片url，然后把这个图片url传递到云函数，然后云函数里使用小程序的开发ocr能力，来识别图片，返回对应的信息回来。如下图所示，我们识别银行卡（身份证什么的就不演示了，涉及到石头哥个人隐私）

接下来就是代码的实现了。

一，首先要创建一个云开发的小程序项目

这里我前面文章有讲解过，就不再细说了，不会的同学去翻看下我之前的文章。或者看下我录制的讲解视频
这里有一点需要注意的给大家说下

二，创建一个简单的小程序页面

1，index.wxml如下
2，index.js完整代码如下

Page({//身份证shenfenzheng() {this.photo("shenfenzheng")},//银行卡yinhangka() {this.photo("yinhangka")},//行驶证xingshizheng() {this.photo("xingshizheng")},//拍照或者从相册选择要识别的照片photo(type) {let that = thiswx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// tempFilePath可以作为img标签的src属性显示图片let imgUrl = res.tempFilePaths[0];that.uploadImg(type, imgUrl)}})},// 上传图片到云存储uploadImg(type, imgUrl) {let that = thiswx.cloud.uploadFile({cloudPath: 'ocr/' + type + '.png',filePath: imgUrl, // 文件路径success: res => {console.log("上传成功", res.fileID)that.getImgUrl(type, res.fileID)},fail: err => {console.log("上传失败", err)}})},//获取云存储里的图片urlgetImgUrl(type, imgUrl) {let that = thiswx.cloud.getTempFileURL({fileList: [imgUrl],success: res => {let imgUrl = res.fileList[0].tempFileURLconsole.log("获取图片url成功", imgUrl)that.shibie(type, imgUrl)},fail: err => {console.log("获取图片url失败", err)}})},//调用云函数，实现OCR识别shibie(type, imgUrl) {wx.cloud.callFunction({name: "ocr",data: {type: type,imgUrl: imgUrl},success(res) {console.log("识别成功", res)},fail(res) {console.log("识别失败", res)}})}
})

上面代码注释讲解的很清楚了，再结合我们的流程图，相信你可以看明白。

三，重头戏来了，识别的核心代码是下面这个云函数

云函数的完整代码也给大家贴出来

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()// 云函数入口函数
exports.main = async(event, context) => {let {type,imgUrl} = eventswitch (type) {case 'shenfenzheng':{// 识别身份证return shenfenzheng(imgUrl)}case 'yinhangka':{// 识别银行卡return yinhangka(imgUrl)}case 'xingshizheng':{// 识别行驶证return xingshizheng(imgUrl)}default:{return}}
}//识别身份证
async function shenfenzheng(imgUrl) {try {const result = await cloud.openapi.ocr.idcard({type: 'photo',imgUrl: imgUrl})return result} catch (err) {console.log(err)return err}
}
//识别银行卡
async function yinhangka(imgUrl) {try {const result = await cloud.openapi.ocr.bankcard({type: 'photo',imgUrl: imgUrl})return result} catch (err) {console.log(err)return err}
}
//识别行驶证
async function xingshizheng(imgUrl) {try {const result = await cloud.openapi.ocr.vehicleLicense({type: 'photo',imgUrl: imgUrl})return result} catch (err) {console.log(err)return err}
}

其实没什么特别的，就是用一个switch方法，根据用户传入的不同的type值，来实现不同的识别效果。
如用传入的type是‘ yinhangka’，我们就调用银行卡识别

try {const result = await cloud.openapi.ocr.bankcard({type: 'photo',imgUrl: imgUrl})return result} catch (err) {console.log(err)return err}

进而把识别的结果返回给小程序端，如下图

到这里我们就完整的实现了，小程序识别身份证，银行卡，行驶证的功能。至于别的更多的ocr识别，可以去看小程序官方文档，结合着我的这篇文章，相信你也可以轻松实现更多的图片识别。

源码其实在上面都已经贴给大家了，如果你觉得不完整，想要完整的源码可以在文章底部留言或者私信我。

小程序识别身份证，银行卡，营业执照，驾照相关推荐

微信小程序识别身份证，银行卡
微信小程序实现身份证,银行卡-识别 OCR 识别 1. 使用微信的OCR 购买成功后在设置插件中添加,详情中查看使用方法–开发文档开发文档中的代码直接使用就可以了 2. 使用百度的 OCR 百 ...
【分享】集简云小程序识别身份证同步到表单流程搭建示例
1. 场景通过小程序智能识别功能,可将居民提供的照片自动识别成文字并同步到表单系统存储,如Excel 365.伙伴云.轻流等进行汇总,实现防疫信息采集自动化! 2. 如何搭建自动化流程? 提前准备工 ...
微信小程序实现身份证识别功能
微信小程序实现身份证识别功能 1,首先登录小程序公众平台 2,进入设置第三方设置 3,添加ocr插件 4,添加完成后 ,需要领取免费额度,是一天100次; 链接然后就是代码编写部分首先在app. ...
Vue-Uni-App小程序实现身份证识别
Vue-Uni-App小程序实现身份证识别~ 需求:实现一个身份证的识别功能!看下方图片! 思路:(把用户上传的身份证图片转成base64请求接口发送给后端,后端返回对应的信息渲染到页面上就行了!) ...
小程序识别带多个参数二维码进入商品详情
小程序识别带多个参数二维码进入商品详情前提: 因为在商品详情页面中有个一功能是点击分享生成海报,海报上面有商品信息以及商品小程序码,用户通过将海报分享给别人的时候,那个人可以通过识别那个商品小程序码 ...
取景框图片小程序_微信小程序实现身份证取景框拍摄
本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码,供大家参考,具体内容如下 wxml wxss .camera_box { height: 100vh; width: 100vw; pos ...
EasyAR+微信小程序识别图片开发记录
EasyAR+微信小程序识别图片开发记录所需数据业务关系示例代码总结所需数据 //小程序>appid AppId:***** //EasyAR> ApiKey:**** APIS ...
微信小程序使用身份证识别
因公司业务需求以及方便用户,需要用户上传身份证后自动识别其中姓名身份证号码信息,方便用户操作,不需要上传身份证后再去重新输入姓名以及身份证号码.因此记录一下微信小程序ocr可识别银行卡.身份证.驾驶 ...
微信小程序实现身份证识别-ocr
项目中有一个识别身份证的需求,经过调研,最后决定使用微信小程序ocr插件进行开发. 一:首先登录小程序公众平台. 1:进入设置> 第三方设置. 2:添加ocr插件. 3:添加完后,需要领取免费额 ...

小程序识别身份证，银行卡，营业执照，驾照