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

本文链接：https://blog.csdn.net/2401_84616922/article/details/138932070

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

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