uniapp实现身份证识别功能
通过调用百度智能云API实现，要先获取 access_token
创建应用获取apiKey和SecretKey
身份证识别接口文档https://ai.baidu.com/ai-doc/OCR/rk3h7xzck
uniapp微信小程序端调用：
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="" @click="getACSS_TOKEN" style="font-size: 36px;">
gettoken
</view>
<view class="" @click="test">
test
</view>
<image :src="base64str" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
title: \'Hello\',
apiKey: \'\',
SecretKey: \'\',
base64str: \'\'
}
},
onLoad() {
// 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key 和 Secret Key
this.apiKey = uni.getStorageSync(\'apiKey\')
this.SecretKey = uni.getStorageSync(\'SecretKey\')
},
methods: {
test() {
let that = this
let access_token = uni.getStorageSync(\'access_token\')
uni.chooseImage({
count: 1, //默认9
sizeType: [\'original\', \'compressed\'], //可以指定是原图还是压缩图，默认二者都有
sourceType: [\'album\'], //从相册选择
success: function (res) {
let tempFilePaths = res.tempFilePaths[0]
// 图片转 base64
uni.getFileSystemManager().readFile({
filePath: tempFilePaths, //选择图片返回的相对路径
encoding: \'base64\', //编码格式
success: v=> { //成功的回调
let base64 = v.data // 返回的是没有 \'data:image/jpeg;base64,\'头的数据, 需要在页面显示图片可自行追加上
that.base64str = \'data:image/jpeg;base64,\' + base64
// 开始识别
uni.request({
url: \'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=\' + access_token,
method: \'POST\',
data: {
image: base64,
id_card_side: \'back\'// 身份证 正反面 front：身份证含照片的一面 back：身份证带国徽的一面
},
header: {
\'Content-Type\': \'application/x-www-form-urlencoded\'
},
success: res => {
console.log(res.data)
console.log(res.data.words_result.签发机关.words)
console.log(res.data.words_result.签发日期.words)
console.log(res.data.words_result.失效日期.words)
}
});
}
})
}
});
},
// access_token 有效期为 2592000 秒 / 30天
getACSS_TOKEN() {
let that = this
uni.request({
url: \'https://aip.baidubce.com/oauth/2.0/token\',
method: \'POST\',
data: {
grant_type: \'client_credentials\',
client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取
client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取
},
header: {
\'Content-Type\': \'application/x-www-form-urlencoded\'
},
success: res => {
console.log(res.data)
uni.setStorageSync(\'access_token\', res.data.access_token)
// console.log(JSON.parse(res.data))
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
uniapp App端调用
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="" @click="getACSS_TOKEN" style="font-size: 36px;">
gettoken
</view>
<view class="" @click="test">
test
</view>
<image :src="base64str" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
title: \'Hello\',
apiKey: \'\',
SecretKey: \'\',
base64str: \'\'
}
},
onLoad() {
// 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key 和 Secret Key
this.apiKey = uni.getStorageSync(\'apiKey\')
this.SecretKey = uni.getStorageSync(\'SecretKey\')
},
methods: {
test() {
let that = this
let access_token = uni.getStorageSync(\'access_token\')
uni.chooseImage({
count: 1, //默认9
sizeType: [\'original\', \'compressed\'], //可以指定是原图还是压缩图，默认二者都有
sourceType: [\'album\'], //从相册选择
success: function (res) {
let tempFilePaths = res.tempFilePaths[0]
// 图片转 base64
plus.io.resolveLocalFileSystemURL(tempFilePaths, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(evt) {
//console.log(evt.target.result);
that.base64str = evt.target.result// 页面显示图片的src
let base64 = evt.target.result.split(",")[1];// 传递给百度识别的 base64 格式的图片文件
// 开始识别
uni.request({
url: \'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=\' + access_token,
method: \'POST\',
data: {
image: base64,
id_card_side: \'back\'// 身份证 正反面 front：身份证含照片的一面 back：身份证带国徽的一面
},
header: {
\'Content-Type\': \'application/x-www-form-urlencoded\'
},
success: res => {
console.log(res.data)
console.log(res.data.words_result.签发机关.words)
console.log(res.data.words_result.签发日期.words)
console.log(res.data.words_result.失效日期.words)
}
});
}
})
})
}
});
},
// access_token 有效期为 2592000 秒 / 30天
getACSS_TOKEN() {
let that = this
uni.request({
url: \'https://aip.baidubce.com/oauth/2.0/token\',
method: \'POST\',
data: {
grant_type: \'client_credentials\',
client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取
client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取
},
header: {
\'Content-Type\': \'application/x-www-form-urlencoded\'
},
success: res => {
console.log(res.data)
uni.setStorageSync(\'access_token\', res.data.access_token)
// console.log(JSON.parse(res.data))
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>