微信小程序 腾讯云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=res
        pages[pages.length-2].__data__.frontImage=detail.filePath
      }else if(detail.side=='BACK'){
        const pages  = getCurrentPages()
        pages[pages.length-2].__data__.form.b_id_card=res
        pages[pages.length-2].__data__.BackImage=detail.filePath
      }
      wx.navigateBack({
        delta: 0,
      })
}