1.百度申请apiKey和SecretKey
https://ai.baidu.com/ai-doc/OCR/dk3iqnq51
2.跟百度发起请求,获取access_token
每次申请的token有30天有效期,为了提高效率,我们只在页面加载的时候获取token,然后保存在本地,以备后面使用
3.通过相册或者拍照来获取图片信息,并且保存为base64格式
我使用了uni-icon,这个是扩展组件,这个需要另外引入,具体步骤见官网
<template>
<view class="container">
<view class="photo">
<view class="album">
<uni-icons type="image" color="#fff" size="30" @click="openAlbum"></uni-icons>
</view>
<view>
<uni-icons type="camera-filled" color="#fff" size="80" @click="takePhoto"></uni-icons>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
apiKey: 'Vm8wE8ANVDT83ZGf8mDLQoLq',
SecretKey: 'UvOZeelDpgFqgi3nrTqfgZNK6OPKMrZl',
}
},
onLoad() {
// 每次加载页面的时候就获取token
this.getAccessToken();
},
methods: {
//打开相册
openAlbum() {
uni.showLoading({
title: '正在获取图片...'
})
let that = this
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
uni.hideLoading()
let tempFilePaths = res.tempFilePaths[0]
// 图片转 base64
uni.getFileSystemManager().readFile({
filePath: tempFilePaths, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: v => { //成功的回调
let base64String = v.data
that.getIdInfo(base64String)
}
})
}
})
},
// 点击拍照
takePhoto() {
let _this = this
let configure = "{'side':'face'}" //face正面、back反面
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
uni.hideLoading()
let tempFilePaths = res.tempFilePaths[0]
// 图片转 base64
uni.getFileSystemManager().readFile({
filePath: tempFilePaths, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: v => { //成功的回调
let base64String = v.data
_this.getIdInfo(base64String)
}
})
}
})
},
// access_token 有效期为 2592000 秒 / 30天,获取token
getAccessToken() {
uni.showLoading({
title: '正在获取令牌...'
})
let that = this
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
method: 'POST',
data: {
grant_type: 'client_credentials',
client_id: that.apiKey, // 在百度智能云那边创建一个应用后可以获取
client_secret: that.SecretKey // 在百度智能云那边创建一个应用后可以获取
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: res => {
uni.hideLoading()
uni.setStorageSync('accessToken', res.data.access_token)
},
fail(e) {
uni.hideLoading()
uni.showToast({
title: '连接服务出错,请稍后再试!'
})
}
});
},
getIdInfo(base64String) {
let accessToken = uni.getStorageSync('accessToken')
uni.showLoading({
title: '正在解析...'
})
// 开始识别
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + accessToken,
method: 'POST',
data: {
image: base64String,
id_card_side: 'front' // 身份证 正反面 front:身份证含照片的一面 back:身份证带国徽的一面
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: res => {
uni.hideLoading()
console.log(res.data)
},
fail(e) {
uni.hideLoading()
uni.showToast({
title: '连接服务出错,请稍后再试!'
})
}
});
}
}
}
</script>
<style>
.container {
background-color: #aaa;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.scan-img {
width: 100%;
height: 500upx;
}
.photo {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 相册按钮使用绝对定位,保证相机按钮居中显示 */
.album {
position: absolute;
left: 50px;
}
</style>