整理之前使用 微信小程序插件OCR实现身份证/驾驶证上传

公司刚开始需要做一个上传身份证来进行识别M刚开始使用的,是前端上传一张图片给后端去解析,后面就刚刚好接触到OCR

文档（OCR支持 |小程序插件 |微信公众平台 (qq.com)）

官方api的使用方法

小程序文档指定位置通用印刷体识别 | 微信开放文档 (qq.com)

调用方式

HTTPS 调用

POST https://api.weixin.qq.com/cv/ocr/driving?access_token=ACCESS_TOKEN 

云调用

• 出入参和 HTTPS 调用相同，调用方式可查看云调用说明文档
• 接口方法为: openapi.ocr.drivingLicense

请求参数

属性	类型	必填	说明
access_token / cloudbase_access_token	string	是	接口调用凭证，该参数为 URL 参数，非 Body 参数。access_token和cloudbase_access_token二选一 其中access_token可通过getAccessToken接口获得； cloudbase_access_token可通过getOpenData接口获得
img_url	string	是	要检测的图片 url，传这个则不用传 img 参数。
img	FormData	是	form-data 中媒体文件标识，有filename、filelength、content-type等信息，传这个则不用传 img_url。

返回参数

属性	类型	说明
errcode	number	错误码
errmsg	string	错误信息
vehicle_type	string	车辆类型
owner	string	所有人
addr	string	住址
use_character	string	使用性质
model	string	品牌型号
vin	string	车辆识别代号
engine_num	string	发动机号码
register_date	string	注册日期
issue_date	string	发证日期
plate_num_b	string	车牌号码
record	string	号牌
passengers_num	string	核定载人数
total_quality	string	总质量
prepare_quality	string	整备质量

遇见问题

在使用img_url这种格式 带htts的这种 有时候会报101000 他会说下载错误 可能是图片过大 但我图片没有问题的 后面没有找到问题就放弃了,使用了另外一种

第二种使用办法 OCR 支持 | 微信开放文档 (qq.com)

使用另外的样子官方提供的组件里面包了一个button按钮返回的回调

组件

对外暴露自定义组件，UI载体为button（可样式自定义） 封装了

第一步引入

去第三方服务里面-添加插件`wx4418e3e031e551be`,去引入OCR

添加完插件后，我们需要到微信服务平台购买识别次数（微信服务平台），可以根据自身需求选择，也可以先免费0元试用100次，如果不购买则错误

调用方式

app.json中增加声明引入插件
选择最新的version

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

页面的json也要增加声明

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

属性名	类型	默认值	是否必填	说明
onSuccess	HandleEvent		是	接口调用成功的回调函数
certificateType	String	idCard	否	证书类型包含七种 身份证：idCard、行驶证：drivingLicense、银行卡：bankCard、营业执照：businessLicense、驾驶证： driverslicense、车牌：platenum、菜单：menu

组件

对外暴露自定义组件，UI载体为button（可样式自定义） 封装了,他的回调e.detail就是需要的数据

参数

属性名	类型	默认值	是否必填	说明
onSuccess	HandleEvent		是	接口调用成功的回调函数
certificateType	String	idCard	否	证书类型包含七种 身份证：idCard、行驶证：drivingLicense、银行卡：bankCard、营业执照：businessLicense、驾驶证： driverslicense、车牌：platenum、菜单：menu

使用

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

platSuccess: function (e) { 
console.log('识别数据的内容', e); 
},