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