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

最近做的医院项目牵扯识别身份证,进行就诊卡查询的功能。记录如何实现这一功能。

首先打开小程序的后台,点开设置,选择第三方设置。
微信小程序实现身份证识别功能。ocr识别插件。_第1张图片
然后找到插件选项,打开并添加ocr支持插件。
微信小程序实现身份证识别功能。ocr识别插件。_第2张图片

添加完成后 ,需要领取免费额度,是一天100次。多了就需要购买。链接挂下方
https://fuwu.weixin.qq.com/detail/000ce4cec24ca026d37900ed551415

做好准备工作后就是代码部分。
首先在app.json里配置ocr-plugin

 "plugins": {
    "ocr-plugin": {
      "version": "3.0.6",
      "provider": "wx4418e3e031e551be"
    }
  }

版本选择最新版。可在 ocr 识别的 详情更新记录里查看
微信小程序实现身份证识别功能。ocr识别插件。_第3张图片
然后在需要使用到的页面.json文件里配置组件。

 "usingComponents": {
    "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
  }

最后就是页面引入组件 。中间可以自定义触发类型,按钮 图片都可。

<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{{false}}">
      <!-- <van-button color="#4593FB">身份证正面识别</van-button> -->
      <view class="cameraImg">
        <image src="../../../image/cardCamera.png"></image>
      </view>
     <view class="cameraFont">点击识别身份证</view>
</ocr-navigator>

我使用的是一个图片配个文字说明。说一下属性的作用。

bind:onSuccess="success"

bind:onSuccess为成功的回调 ,可以在js方法区写好,打印返回结果。根据数据格式进行下面需求操作。

certificateType="idCard"

certificateType为识别卡片的类型。
身份证:idcard。
驾驶证:drivingLicense
银行卡:bankCard
营业执照:businessLicense

opposite:是否显示正反面。

成功后的数据参考
微信小程序实现身份证识别功能。ocr识别插件。_第4张图片

你可能感兴趣的:(前端,微信小程序,小程序,ocr)