##更新 2024年6月3日10:17:30

很多同学私信我要完整代码，这里是完整组件下载地址 OCR.zip 注意需要自己申请秘钥哦！

前言

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

兼容说明

准备工作

1. 注册百度账号

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

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

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

3. 获取AppID和AK

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

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

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

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

<code>/**

* @description 本地图片转base64方法（兼容APP、H5、小程序）

* @param {number} path 图片本地路径

* @returns Promise对象

*/

const toBase64 = (path) => {

return new Promise((resolve, reject) => {

// #ifdef APP-PLUS

plus.io.resolveLocalFileSystemURL(path, (entry) => {

entry.file((file) => {

let fileReader = new plus.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 license

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

<button type="primary" @click="chooseImage">上传身份证</button>code>

</template>

结语