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

前言

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

兼容说明

APP	小程序	H5
√	√	√

准备工作

1. 注册百度账号

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

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

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

3. 获取AppID和AK

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

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

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

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

/** * @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
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

具体代码

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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

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

• 1
• 2
• 3
• 4
• 5
• 6

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) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

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) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

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 }) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

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) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

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) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

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 }) } }) },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

9. 组件html部分代码

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

• 1
• 2
• 3

结语

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