uniapp编写微信小程序调用百度OCR
公司有一个识别行驶证需求,调用百度ocr识别
使用了image-tools这个插件,因为百度ocr接口用图片的base64
这里只是简单演示,accesstoken获取接口还是要放在服务器端,不然就暴露了自己的百度项目key
代码我使用了这个博主的代码
https://blog.csdn.net/sjt1010/article/details/108272945
还有需要将百度接口的地址加到微信公众平台,开发管理的服务器域名里
<template>
<view class="cheliangjinchudengji-index">
<view>
<button type="primary" @click="chooseImg">行驶证拍照识别</button>
<view style="margin-left:10px ;" v-if="imgList.length > 0">
<view v-for="(item,index) in imgList" :key="index">
<image :src="item" mode=""></image>
</view>
</view>
<!-- <button type="primary" @click="getBaiduToken">token</button> -->
<view v-for="item of cardatas" :key="item">
<view>{{item}}</view>
</view>
</view>
</view>
</template>
<script>
import { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js'
import { fetchBaiduOCRDatas } from '../../utils/basePath';
export default {
data() {
return {
imgList: [],
token:'',
cardatas:{
chepai:'',
xinghao:''
}
}
},
methods: {
chooseImg(){
let that = this;
that.getBaiduToken();
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
// #ifdef MP-WEIXIN
uni.getFileSystemManager().readFile({
filePath: tempFilePaths[0],
encoding: 'base64',
success: r => {
console.log(r.data)
let base64 = 'data:image/jpeg;base64,' + r.data;
that.imgList.push(base64)
that.postBaiduOcr(base64);
}
})
// #endif
// // #ifdef APP-PLUS
// pathToBase64(tempFilePaths[0])
// .then(base64 => {
// that.imgList.push(base64)
// })
// .catch(error => {
// console.error(error)
// })
// // #endif
}
});
},
postBaiduOcr(imgbase64){
let that = this;
let accessToken = that.token;
fetchBaiduOCRDatas(
"https://aip.baidubce.com/rest/2.0/ocr/v1/vehicle_license?access_token="+accessToken,
{"image":imgbase64} ,
{'content-type': 'application/x-www-form-urlencoded'},
"POST",
res=>{
if(res.statusCode=='200' || res.statusCode==200){
uni.showToast({
type: 'success',
title: 'OCR成功!',
icon: 'none',
duration:3000
});
that.cardatas.chepai = res.data.words_result.号牌号码.words;
that.cardatas.xinghao = res.data.words_result.品牌型号.words;
}else{
uni.showToast({
type: 'error',
title: res.data.error_description,
icon: 'none',
duration:3000
});
}
})
},
getBaiduToken(){
fetchBaiduOCRDatas(
"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=xxxx&client_secret=xxxx",
{},
{'Content-Type': 'application/json', 'Accept': 'application/json'},
"POST",
res=>{
if(res.statusCode=='200' || res.statusCode==200){
uni.showToast({
type: 'success',
title: 'token获取成功!',
icon: 'none',
duration:3000
});
this.token = res.data.access_token
}else{
uni.showToast({
type: 'error',
title: res.data.error_description,
icon: 'none',
duration:3000
});
}
})
},
}
}
</script>
<style>
</style>
const fetchBaiduOCRDatas = (url, data, header, method, callback, errCallback)=>{
// let token = uni.getStorageSync('token');
uni.request({
url: url,
data: data,
method:method,
header: header,
// {
// 'content-type': 'application/x-www-form-urlencoded'
// },
success (res) {
uni.hideLoading();
callback(res);
}
})
}
这个行驶证图片是百度开发平台提供的图片