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

前言

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

兼容说明

准备工作

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实现卡证识别和文字识别的整体实现过程全部内容了，有不懂的，或者我代码有误的地方，希望大家多多交流。具体详细代码示例可以私信问我要哈！