微信小程序腾讯云ocr 身份证识别

官方文档文字识别跑通 Demo（小程序） - 客户端 SDK 接入文档 - 文档中心 - 腾讯云

可以先按照腾讯云的demo 去跑通一下（记得先开通哈）

一、代码解析

在demo中主要就是 id-card 文件去控制这识别及显隐 ocrsdk/pages/id-card/id-card

在代码中就是通过 wx:if 来控制相机组件是否是显示和隐藏 showCamera

上传身份证之后发现控制台并没有输出在哪里调用的所以我们要去它的内部去找出它识别的位置代码

在id-card 第一行中 require('../behaviors/multi-side-behavior'); 引入了一个js文件而它里面有一个 onOcrSuccess 方法这个方法就是识别出来的内容

二、引入到自己的项目

在自己的项目中并不想要官方内置的样式所以这时候只能去手动改官方的源码实现自己想要的效果

先按照官方提供的基础操作文字识别快速集成（小程序） - 客户端 SDK 接入文档 - 文档中心 - 腾讯云

总共分为三部分

1.引入官方sdk到根目录

2.在想要识别的地方引入到文件中

3. 修改官方代码改成自己想要的效果

注意在配置sdk的参数时腾讯云的秘钥要从服务端获取保留在前端是不安全的~

接下来直接说如何放到自己项目下

先给身份证正面来一个点击事件

 uploadZ(){wx.setStorageSync('id-arrow', 'FRONT')ocrSdk.start({secretId:that.data.SecretId, //接口获取的秘钥secretKey:that.data.SecretKey,ocrType: ocrSdk.OcrType.ID_CARDF,ocrOption: {Config: {"CropIdCard": true,"CropPortrait": true}},cameraConfig: {autoMode: true,maxTry: 3,},resultPage: true,resultPageConfig: {modifiable: true,},theme: 'primary',success: (res) => {console.log('ocr result is:', res)// wx.navigateTo({//   url: '您的小程序页面',// })wx.navigateTo({url: '/pages/mine/settlementDetails/settlementDetails',})},fail: (error)=> {console.log('ocr failed:', error)}});},

wx.setStorageSync('id-arrow', 'FRONT') 在本地存储一个变量来检测区分正反面因为是官方内置的sdk 没办法携带参数到识别页面

接下来就会触发 id-card.js文件我们在onLoad 中去执行调用代码不通过点击事件去调用

id-card.js

  onLoad(e){this.onItemTap( wx.getStorageSync('id-arrow'))},
onItemTap(side) {// const { side } = e.currentTarget.dataset;const { ocrResponse } = this.data;// 清除上次结果if (ocrResponse) {let temp = {};Object.keys(ocrResponse).forEach((item) => {if (ocrResponse[item].side !== side) {temp[item] = ocrResponse[item];}});if (Object.keys(temp).length === 0) {temp = null;}this.setData({ ocrResponse: temp });console.log(ocrResponse,'信息');}this.setData({showCamera: true,selectedSide: side,});},

behaviors/multi-side-behavior.js

在执行成功的文件中判断是正反面从使用小程序的页面栈去赋值上一页的变量就可以啦

 onOcrSuccess(detail, res) {console.log(detail,res,'数据');if(detail.side=="FRONT"){const pages  = getCurrentPages()pages[pages.length-2].__data__.form.f_id_card=respages[pages.length-2].__data__.frontImage=detail.filePath}else if(detail.side=='BACK'){const pages  = getCurrentPages()pages[pages.length-2].__data__.form.b_id_card=respages[pages.length-2].__data__.BackImage=detail.filePath}wx.navigateBack({delta: 0,})
}