uniapp 前端实现文字识别，身份证识别，营业执照识别 （兼容APP、H5、小程序 不需要任何SDK）

前言

本文将介绍如何使用uniapp和百度AI开放平台的OCR(光学字符识别)API实现身份证、营业执照等卡证的识别和文字识别功能。

兼容说明

APP小程序H5√√√

准备工作

1. 注册百度账号

1. 前往百度AI开放平台官网,点击“登录”。使用百度账号登录,如果没有可以先注册百度账号。
2. 登录成功后,点击右上角的“开发者服务”->“API 服务”。

2. 进入开发者平台,创建OCR文字识别应用

1. 在AI能力服务类目中选择“OCR文字识别”,进入文字识别产品的应用页。
2. 点击“立即使用”,进入OCR文字识别应用创建页。

3. 获取AppID和AK

1. 输入应用名称,选择应用类型为“公开应用”或“私有应用”,填写验证码后点击“创建应用”。
2. 应用创建成功把对应的client_id和client_secret保存好添加到项目里

图片转base64（兼容APP、H5、小程序）

新建一个js文件导出toBase64函数

将图片文件路径转为base64格式

/**
 * @description 本地图片转base64方法（兼容APP、H5、小程序）
 * @param {number} path 图片本地路径
 * @returns Promise对象
 */consttoBase64=(path)=>{returnnewPromise((resolve, reject)=>{// #ifdef APP-PLUS
        plus.io.resolveLocalFileSystemURL(path,(entry)=>{
            entry.file((file)=>{let fileReader =newplus.io.FileReader()
                fileReader.readAsDataURL(file)
                fileReader.onloadend=(evt)=>{let base64 = evt.target.result.split(",")[1]resolve(base64)}})})// #endif// #ifdef H5
        uni.request({url: path,responseType:'arraybuffer',success:(res)=>{resolve(uni.arrayBufferToBase64(res.data))}})// #endif// #ifdef MP-WEIXIN
        uni.getFileSystemManager().readFile({filePath: path,encoding:'base64',success:(res)=>{resolve(res.data)}})// #endif})}export{
    toBase64
}

具体代码

1. 在data里声明申请好的秘钥

data(){return{dataObj:{client_id:'填你自己的',client_secret:'填你自己的',}}},

2. 声明接受参数dataType，用于判断需要识别的类型

props:{dataType:{type: String,default:'idcard',}},

3. 选择本地图片

使用uni.chooseImage()选择需要识别的图片:

// 选择本地图片chooseImage(){let self =this
                uni.chooseImage({count:1,success:(ress)=>{
                        uni.showLoading({title:'正在识别中...'})// 下面将图片本地路径转base64
                        convert.toBase64(ress.tempFilePaths[0]).then((res)=>{
                            self.getAccessToken(res, ress)})},fail(err){
                        uni.hideLoading()
                        console.log(err)}})},

4. 获取AccessToken

调用相应的识别接口
根据需要识别的卡证类型,调用不同的OCR识别接口,传入图片base64和token进行识别:

请求百度AI开放平台的token接口,获取后续接口的访问凭证:

getAccessToken(path, ress){let self =this
                uni.request({url:'https://aip.baidubce.com/oauth/2.0/token',data:{grant_type:'client_credentials',client_id: self.dataObj.client_id,client_secret: self.dataObj.client_secret
                    },method:'POST',header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{if(self.dataType =='idcard'){
                            self.uploadImage(path, res.data.access_token, ress)}else{
                            self.uploadlicense(path, res.data.access_token, ress)}
                        uni.hideLoading()},fail(err){
                        uni.hideLoading()
                        console.log(err)}})},

5.通用文字识别（高精度版）

uploadImage(path, token){
                uni.request({url:'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',data:{image: path,access_token: token
                    },method:'POST',header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{this.$emit('end',{animal:false,words: res.data.words_result
                        })}})},

6. 身份证识别:

正反面都可以使用这个，请求返回内容不一样。

// 身份证识别uploadImage(path, token, ress){let self =this
                uni.request({url:'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',data:{image: path,access_token: token,id_card_side:'back'},method:'POST',header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{
                        uni.hideLoading()
                        self.$emit('end',{path: ress,animal:false,words: res.data
                        })},fail(err){
                        uni.hideLoading()
                        console.log(err)}})},

7. 营业执照:

// 营业执照识别Business licenseuploadlicense(path, token, ress){let self =this
                uni.request({url:'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license',data:{image: path,access_token: token,},method:'POST',header:{'Content-Type':'application/x-www-form-urlencoded',},success:(res)=>{
                        uni.hideLoading()
                        self.$emit('end',{path: ress,animal:false,words: res.data
                        })},fail(err){
                        uni.hideLoading()
                        console.log(err)}})},

8. 通用文字识别:

// 通用文字识别（高精度版）uploadImage(path, token){
                uni.request({url:'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',data:{image: path,access_token: token
                    },method:'POST',header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{this.$emit('end',{animal:false,words: res.data.words_result
                        })}})},

9. 组件html部分代码

<template><buttontype="primary"@click="chooseImage">上传身份证</button></template>

结语

以上就是uniapp使用百度AI平台OCR API实现卡证识别和文字识别的整体实现过程全部内容了，有不懂的，或者我代码有误的地方，希望大家多多交流。具体详细代码示例可以私信问我要哈！