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

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对象
 \*/
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. 身份证识别:

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

最后

中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。

  • 技术要深入到什么程度?

  • 做久了技术总要转型管理?

  • 我能做什么,我想做什么?

  • 一技之长,就是深耕你的专业技能,你的专业技术。(重点)

  • 独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)

  • 拥有事业,选择一份使命,带领团队实现它。(创业)

一技之长分五个层次

  • 栈内技术 - 是指你的前端专业领域技术

  • 栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识

  • 工程经验 - 是建设专业技术体系的“解决方案”

  • 带人做事 - 是对团队协作能力的要求

  • 业界发声 - 工作经验总结对外分享,与他人交流

永远不要放弃一技之长,它值得你长期信仰持有

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

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值