阅读 815

微信小程序实现身份证识别功能——OCR插件

在项目中遇到需要收集用户身份证信息时,可以使用微信小程序提供的 OCR 插件扫描获取信息,实现步骤及方法入下:

1. 进入小程序平台添加插件

image.png

添加完成后 ,需要领取免费额度,是一天100次。多了就需要购买。链接地址:

fuwu.weixin.qq.com/detail/000c…

点击链接进入如下界面,进行对应的操作即可:

image.png

image.png

2. 在项目中进行配置

2.1 在小程序的 app.json 文件中增加声明引入插件
version选择最新版本

"plugins": {
    "ocr-plugin": {
      "version": "3.0.6",
      "provider": "wx4418e3e031e551be"
    }
 }
复制代码

查看最新版本:

image.png
2.2 在需要使用到的页面的 json 也要增加声明

{
  "usingComponents": {
    "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
  }
}
复制代码

2.3 在需要使用的位置添加以下代码即可:

<view class="app">
  <view>
    <ocr-navigator bind:onSuccess="success_1" certificateType="idCard" opposite="{{false}}">
      <button type="primary">身份证正面识别(头像面)</button>
    </ocr-navigator>
    <view class="mt20">
      <view>姓名:<text>{{name}}</text></view>
      <view>性别:<text>{{sex}}</text></view>
      <view>出生:<text>{{birthday}}</text></view>
      <view>民族: <text>{{national}}</text></view>
      <view>住址:<text>{{address}}</text></view>
      <view>公民身份证号:<text>{{idCardNO}}</text></view>
    </view>
  </view>
  
  <view>
    <ocr-navigator bind:onSuccess="success_2" certificateType="idCard" opposite="{{true}}">
      <button class="second" type="primary">身份证反面识别(国徽面)</button>
    </ocr-navigator>
    <view class="mt20">
      <view>
        签发机关:<text>{{organazation}}</text>
      </view>
      <view>
        有效日期: <text>{{validTime}}</text>
      </view>
    </view>
  </view>
</view>
复制代码

2.4 在 js 文件中进行数据赋值即可

// pages/my/my.js
Page({
  data: {
    name: "", // 姓名
    sex: "",  // 性别
    birthday: "",  // 出生日期
    national: "", // 民族
    address: "", // 住址
    idCardNO: "", // 身份证号
    imgPath:"", // 图片地址
    organazation: "", // 签发机关
    validTime: ""', //有效日期
  },
  success_1(e) {
    this.setData({
      name: e.detail.name.text,
      sex: e.detail.gender.text,
      birthday: e.detail.birth.text,
      national: e.detail.nationality.text,
      address: e.detail.address.text,
      idCardNO: e.detail.id.text,
      imgPath: e.detail.image_path
    })
  },
  success_2(e) {
    this.setData({
      validTime: e.detail.valid_date.text,
      organazation: e.detail.authority.text
    })
  }
})
复制代码

2.5 ocr-navigator 标签属性说明:
certificateType为识别卡片的类型, 包含以下五种:
身份证:idcard
行驶证:drivingLicense
驾驶证:driverslicense
银行卡:bankCard
营业执照:businessLicense

opposite:显示正/反面。

文章分类
前端