随着科技的不断发展,图片识别技术已经成为了当下移动互联网中的热点话题。而基于微信小程序和 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>