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

飞熊 • 2023年12月19日下午8:52 • Vue • 阅读 302

随着科技的不断发展，图片识别技术已经成为了当下移动互联网中的热点话题。而基于微信小程序和 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 插件除了能识别车牌号以外，该插件还支持身份证、行驶证、银行卡、营业执照和驾驶证等识别

使用示例

<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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188399.html