今天给大家带来开发者小伙伴关于百度人像特效在AI小程序上实现护照识别的详细教程，下面我们来看具体详情：
支持对中国大陆护照个人资料页所有15个字段进行结构化识别，包括国家码、护照号、姓名、姓名拼音、性别、出生地点、出生日期、签发地点、签发日期、有效期、签发机关、护照类型、国籍、MRZCode1、MRZCode2。
1、系统框架
用到的技术主要有：百度护照识别和微信小程序。小程序将用户上传的图片提交给百度护照识别服务，返回护照所有信息。全部功能都在小程序客户端完成，不需要服务器，适合个人开发者学习调试使用，同时也为商业应用提供相应解决方案。
2、创建小程序项目
在根目录的全局配置文件app.json中增加："pages/passport/passport"，会自动创建相关页面文件，结构如下：
passport.js：功能逻辑模块
passport.wxss：页面样式文件
passport.wxml：页面布局文件
passport.json：页面配置文件
3、调用护照识别API
1，首先要在控制台创建应用，调用护照识别API，“获取API Key/Secret Key”。
接口文档地址：https://ai.baidu.com/ai-doc/OCR/Wk3h7y1gi
请求URL:https://aip.baidubce.com/rest/2.0/ocr/v1/passport
Body中放置请求参数，参数详情如下：
返回参数：
2，护照识别功能实现
（1）发送URL请求核心代码
//在baiduai.js中发送URL请求，并进行封装。
//护照识别接口请求，此处添加
let business_licenseUrl='https://aip.baidubce.com/rest/2.0/ocr/v1/passport';
let business_licenseRequest=(base64Img,callback)=>{
var accessToken=app.globalData.access_token;
//拼接接口body参数
let params={
image:base64Img,
detectorId:0
}
//发送接口请求
wx.request({
url:business_licenseUrl+'?access_token='+accessToken,
data:params,
header:{
'content-type':'application/x-www-form-urlencoded'
},
method:'POST',
success:function(res){
callback.success(res.data)
},
fail:function(res){
if(callback.fail)
callback.fail()
}
})
}
//暴露出去的接口
module.exports={
passportRequest:passportRequest,
}
(2)定义按钮点击事件
//在passport.js中定义定义按钮点击事件
//按钮点击事件
uploads:function(){
var that=this
wx.chooseImage({
count:1,//默认9
sizeType:['compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
if(res.tempFiles[0].size>4096*1024){
wx.showToast({
title:'图片文件过大哦',
icon:'none',
mask:true,
duration:1500
})
}else{
that.setData({
img:res.tempFilePaths[0]
})
}
wx.showLoading({
title:"分析中...",
mask:true
})
//根据上传的图片读取图片的base64
var fs=wx.getFileSystemManager();
fs.readFile({
filePath:res.tempFilePaths[0].toString(),
encoding:'base64',
success(res){
//获取到图片的base64进行请求接口
api.passport Request(res.data,{
success(res){
if(res.data!=''){
wx.hideLoading();
var text='';
text+="n";
var list=[];
var list=res.words_result;
var len=res.words_result_num;
console.info(list);
//遍历打印字典元素
for(var key in list){
text+=key+":"+list[key].words+"n";
console.info(key+":"+list[key].words);
}
/*for(var j=0;j<len;j++){
text+=list[j]['words']+"n";
console.info(text);
}*/
that.setData({
output:text
})
}else{
wx.hideLoading();
wx.showModal({
showCancel:false,
title:'温馨提示',
content:'貌似没有识别出结果'
})
}
}
})
}
})
},
})
},
(3)修改页面样式文件
/*pages/passport/passport.wxss*/
.image{
width:100%;
height:360rpx;
}
.container{
margin-top:-110px;
background-repeat:no-repeat;
background-size:auto;
background-position:bottom;
background-position-x:right;
}
button{
font-family:微软雅黑;
}
.page-body-info{
display:flex;
box-sizing:border-box;
padding:30rpx;
height:420rpx;
border-top:1rpx solid#d9d9d9;
border-bottom:1rpx solid#d9d9d9;
align-items:center;
justify-content:center;
}
.atbottom{
width:100%;
height:50px;
display:flex;
flex-direction:row;
justify-content:center;
position:fixed;
background:#3366FF;
bottom:0;
}
.img_wrap{
margin-bottom:10px;
width:750rpx;
height:550rpx;
background:#ececec;
}
image{
width:100%;
height:100%;
max-height:1
}
.msg{
margin:10px 0;
text-align:center;
}
.table{
margin-top:10rpx;
border:0px solid darkgray;
width:100%;
}
.tr{
display:flex;
width:100%;
justify-content:center;
height:80rpx;
}
.td{
font-family:微软雅黑;
font-size:28rpx;
width:100%;
display:flex;
justify-content:center;
text-align:center;
align-items:center;
}
.bg-g{
background:white;
}
.result{
font-size:32rpx;
color:#fa4627;
border-top:1rpx solid#eeeeee;
margin:30rpx 20rpx 0rpx 20rpx;
padding:10rpx;
}
.th{
font-size:28rpx;
width:48%;
justify-content:center;
background:#3366FF;
color:#fff;
display:flex;
height:80rpx;
align-items:center;
}
4、实现效果
更多百度人像特效小程序实现教程，腾佑AI人工智能持续分享中！
产品详情页