微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别

简介: 微信小程序OCR插件,实现身份证、行驶证、银行卡、营业执照和驾驶证等识别

随着科技的不断发展,图片识别技术已经成为了当下移动互联网中的热点话题。而基于微信小程序和 OCR 插件的图文识别方案,更是成为了越来越多小程序开发者关注和研究的问题。本文中,我将为大家介绍微信小程序 OCR 插件,帮助大家实现身份证、行驶证、银行卡、营业执照和驾驶证等识别功能。

1. 添加此插

首先,需要前往微信小程序社区平台添加此插件(微信小程序社区平台)


2. 购买识别次数

添加完插件后,需要到微信服务平台购买识别次数(微信服务平台),可以根据自身需求选择,也可以先免费0元试用100次,如果不购买则会报错,识别不成功。


3. 在app.json中增加声明引入插件
//app.json
"plugins": {
    "ocr-plugin": {
      "version": "3.1.3",
      "provider": "wx4418e3e031e551be"
    }
}
4.注册插件

使用插件所在的json,或全局注册插件

{
    "usingComponents": {
        "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
    }
}
5.使用OCR插件

对外暴露自定义组件,UI载体为button(可样式自定义)

<!-- 识别组件 -->
<view
    <ocr-navigator bind:onSuccess="platenumSuccess" certificateType="platenum">
        <button type="primary">车牌号识别</button>
    </ocr-navigator>
</view>

<!-- 识别出来的内容 -->
<view>识别出来的内容:{{ text }}</view>


Page({
    data: {text: '' //要赋的值},

    // 调用事件方法
    platenumSuccess: function (e) {
        console.log('识别数据的内容', e);
        // 赋值操作this.setData({text: e.detail.number.text})
    },
})

OCR 插件除了能识别车牌号以外,该插件还支持身份证、行驶证、银行卡、营业执照和驾驶证等识别

6.使用示例
<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{{false}}">
  <button type="primary" class="ocr-wrapper">身份证正面识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{{true}}">
  <button type="primary" class="ocr-wrapper">身份证反面识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="driverslicense">
  <button type="primary" class="ocr-wrapper">驾驶证识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="drivingLicense">
  <button type="primary" class="ocr-wrapper">行驶证识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="platenum">
  <button type="primary" class="ocr-wrapper">车牌识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="bankCard">
  <button type="primary" class="ocr-wrapper">银行卡识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="businessLicense">
  <button type="primary" class="ocr-wrapper">营业执照识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="menu">
  <button type="primary" class="ocr-wrapper">菜单识别</button>
</ocr-navigator>
目录
相关文章
|
JSON 文字识别 小程序
UNIAPP小程序OCR识别
UNIAPP小程序OCR识别
860 0
UNIAPP小程序OCR识别
|
小程序 JavaScript
微信小程序统计图表插件wxcharts的使用汇总
微信小程序统计图表插件wxcharts的使用汇总
1844 0
|
JSON 文字识别 小程序
UNIAPP小程序OCR识别
UNIAPP小程序OCR识别
1060 0
|
JSON 小程序 JavaScript
微信小程序 - VSCode 插件支持
微信小程序 - VSCode 插件支持
2481 0
|
小程序 前端开发 开发者
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.1 添加微信小程序插件
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.1 添加微信小程序插件
475 0
|
小程序 前端开发 API
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件(上)
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件(上)
594 0
|
前端开发 小程序 API
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件(下)
《智能前端技术与实践》——第1章 开发环境配置——1.7 使用微信开发者工具——1.7.2 使用微信小程序插件(下)
487 0
|
存储 文字识别 小程序
小程序识别身份证 银行卡 营业执照 驾照 小程序OCR图片识别
小程序识别身份证 银行卡 营业执照 驾照 小程序OCR图片识别
685 0
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4984 7

热门文章

最新文章