uniapp: 前端利用百度云OCR实现文字识别(身份证识别功能,别的功能类似)

第一章 前言

  • 介绍如何使用百度智能云实现我们想要的效果,需要在下面这个网址注册账号:

百度智能云-云智一体深入产业

  • 使用文档在该网址上:

简介 - 文字识别OCR

  • 请求成功的效果,如下图:
  • 搜索产品(例如文字识别)-> 立即使用 -> 免费领取 -> 创建应用 (跟着步骤走就好了)
  • 创建成功后,应用列表,如下图
  • 进入管理,如下图:(注意框的内容是需要用到的字段)

第二章 实战

  • 根据文档需求获取Access Token(Access Token的有效期(秒为单位,有效期30天);)
  • 注意:Access Token是有有效期的,所以需要定时或者在打开页面时就获取它(登录页也可),小编是测试功能的,所以在进入有识别的页面获取的

代码如下:(这些都是uniapp原生api,小编就不每句代码都解释一下了,具体可看官网)

javascript 复制代码
<template>
	<view class="content">
		<uni-nav-bar
			left-icon="back" 
			:fixed="true"
			@clickLeft="back2Index" 
			title="身份证测试平台"
			backgroundColor="#1677FF"
			height="88rpx"
			color="#fff"
			:border="false"
			safeAreaInsetTop></uni-nav-bar>
			<button @click="chooseImage">选择图片</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {
					client_id: 'API Key',
					client_secret: 'Secret Key',
				},
				accessToken: ''
			}
		},
		onLoad() {
            // 方法调用
			this.getAccessToken()
		},
		methods: {
			// 百度云获取accessToken
			getAccessToken() {
				let self = this
                // 请求
				uni.request({
					url: '/baiduApi/oauth/2.0/token',
					data: {
						grant_type: 'client_credentials',
						client_id: self.dataObj.client_id,
						client_secret: self.dataObj.client_secret
					},
					dataType: "JSONP",
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
                        // 将得到的res先转对象,在.点出我们想要的值
						this.accessToken = JSON.parse(res.data).access_token
						console.log('accessToken', this.accessToken)
					},
					fail(err) {
						console.log("访问失败", err)
					}
				})
			},
			back2Index(){
				uni.navigateBack()
			},
		}
	}
</script>

注意:这里请求的携带的三个参数:grant_type、client_id、client_secret,grant_type为client_credentials表示身份证识别,值固定直接根据官方文档赋值即可,client_id和client_secret对应的是第一章圈的两个字段,分别应用创建成功的API Key和Secret Key

注:小编统计的常用api

uniapp常用api_❆VE❆的博客-CSDN博客

  • 得到 Access Token之后就能选择图片了:
javascript 复制代码
methods: {
    // 选择图片
	chooseImage() {
		let self = this
        // 这也是uniapp原生api
		uni.chooseImage({
			count: 1,
			success: (ress) => {
				uni.showLoading({
					title: '正在识别中...'
				})
				// 下面将图片本地路径转base64
				console.log('ress', ress)
				self.toBase64(ress.tempFilePaths[0]).then((res) => {
					console.log("res", res)
                    // 该函数是识别身份证的 也就是这个函数用到OCR百度云的接口
					self.uploadImage(res)
				})
			},
			fail(err) {
				uni.hideLoading()
				console.log(err)
			}
		})
	},
    // 转换为base64的函数
    toBase64(path){
		return new Promise((resolve, reject) => {
			uni.request({
				url: path,
				responseType: 'arraybuffer',
				success: (res) => {
					resolve(uni.arrayBufferToBase64(res.data))
				}
			})
		})
	},
}
  • 发送请求,识别身份证正反面获取的信息:
javascript 复制代码
methods: {
    // 身份证识别
	uploadImage(path) {
		let self = this
		uni.request({
			url: '/baiduApi/rest/2.0/ocr/v1/idcard',
			data: {
				image: path, // 图片的base64路径
				access_token: self.accessToken, // Access Token
				id_card_side: 'front' // front身份证正面 back身份证反面
			},
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			success: (res) => {
				uni.hideLoading()
				console.log('res', res) // 这就是调用百度云OCR接口成功返回的值
			},
			fail(err) {
				uni.hideLoading()
				console.log(err)
			}
		})
	},
}
  • 千万不要忘了还有跨域的问题哦!!!配置如下:
javascript 复制代码
"h5" : {
   "devServer" : {
       "port" : 8000,
       "disableHostCheck" : true,
       "proxy" : {
           "/baiduApi" : {
               "target" : "https://aip.baidubce.com", // 需要跨域的域名
               "changeOrigin" : true,
               "secure" : false,
               "pathRewrite" : {
                    "^/baiduApi" : ""
                }
           }
       }
   },
}

https://aip.baidubce.com/oauth/2.0/token报错blocked by CORS policy-CSDN博客

  • 我们来看看res的值
相关推荐
cy玩具16 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer0843 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web