uniapp调用百度智能云API实现身份证识别功能

1. <template> 
2.     <view class="content"> 
3.         <!-- <image class="logo" src="/static/logo.png"></image> --> 
4.         <view class="text-area"> 
5.             <text class="title">{{title}}</text> 
6.         </view> 
7.         <view class="" @click="getACSS_TOKEN" style="font-size: 36px;"> 
8.             gettoken 
9.         </view> 
10.         <view class="" @click="test"> 
11.             test 
12.         </view> 
13.         <image :src="base64str" mode=""></image> 
14.     </view> 
15. </template> 
16.  
17. <script> 
18.     export default { 
19.         data() { 
20.             return { 
21.                 title: 'Hello', 
22.                 apiKey: '', 
23.                 SecretKey: '', 
24.                 base64str: '' 
25.             } 
26.         }, 
27.         onLoad() { 
28.             // 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key  和  Secret Key 
29.             this.apiKey = uni.getStorageSync('apiKey') 
30.             this.SecretKey = uni.getStorageSync('SecretKey') 
31.         }, 
32.         methods: { 
33.             test() { 
34.                 let that = this 
35.                 let access_token = uni.getStorageSync('access_token') 
36.                  
37.                 uni.chooseImage({ 
38.                     count: 1, //默认9 
39.                     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 
40.                     sourceType: ['album'], //从相册选择 
41.                     success: function (res) { 
42.                          
43.                         let tempFilePaths = res.tempFilePaths[0] 
44.                         // 图片转 base64 
45.                         uni.getFileSystemManager().readFile({ 
46.                             filePath: tempFilePaths, //选择图片返回的相对路径   
47.                             encoding: 'base64', //编码格式   
48.                             success: v=> { //成功的回调   
49.                                 let base64 =  v.data // 返回的是没有 'data:image/jpeg;base64,'头的数据, 需要在页面显示图片可自行追加上   
50.                                 that.base64str = 'data:image/jpeg;base64,' + base64 
51.                                  
52.                                 // 开始识别 
53.                                 uni.request({ 
54.                                     url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + access_token, 
55.                                     method: 'POST', 
56.                                     data: { 
57.                                         image: base64, 
58.                                         id_card_side: 'back'// 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面 
59.                                     }, 
60.                                     header: { 
61.                                         'Content-Type': 'application/x-www-form-urlencoded' 
62.                                     }, 
63.                                     success: res => { 
64.                                         console.log(res.data) 
65.                                         console.log(res.data.words_result.签发机关.words) 
66.                                         console.log(res.data.words_result.签发日期.words) 
67.                                         console.log(res.data.words_result.失效日期.words) 
68.                                     } 
69.                                 }); 
70.                              }   
71.                         })  
72.                          
73.                          
74.                     } 
75.                 }); 
76.                  
77.             }, 
78.             // access_token 有效期为 2592000 秒 / 30天 
79.             getACSS_TOKEN() { 
80.                 let that = this 
81.                 uni.request({ 
82.                     url: 'https://aip.baidubce.com/oauth/2.0/token', 
83.                     method: 'POST', 
84.                     data: { 
85.                         grant_type: 'client_credentials', 
86.                         client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取 
87.                         client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取 
88.                     }, 
89.                     header: { 
90.                         'Content-Type': 'application/x-www-form-urlencoded' 
91.                     }, 
92.                     success: res => { 
93.                         console.log(res.data) 
94.                         uni.setStorageSync('access_token', res.data.access_token) 
95.                         // console.log(JSON.parse(res.data)) 
96.                     } 
97.                 }); 
98.             } 
99.         } 
100.     } 
101. </script> 
102.  
103. <style> 
104.     .content { 
105.         display: flex; 
106.         flex-direction: column; 
107.         align-items: center; 
108.         justify-content: center; 
109.     } 
110.  
111.     .logo { 
112.         height: 200rpx; 
113.         width: 200rpx; 
114.         margin-top: 200rpx; 
115.         margin-left: auto; 
116.         margin-right: auto; 
117.         margin-bottom: 50rpx; 
118.     } 
119.  
120.     .text-area { 
121.         display: flex; 
122.         justify-content: center; 
123.     } 
124.  
125.     .title { 
126.         font-size: 36rpx; 
127.         color: #8f8f94; 
128.     } 
129. </style> 

uniapp App端调用

1. <template> 
2.     <view class="content"> 
3.         <!-- <image class="logo" src="/static/logo.png"></image> --> 
4.         <view class="text-area"> 
5.             <text class="title">{{title}}</text> 
6.         </view> 
7.         <view class="" @click="getACSS_TOKEN" style="font-size: 36px;"> 
8.             gettoken 
9.         </view> 
10.         <view class="" @click="test"> 
11.             test 
12.         </view> 
13.         <image :src="base64str" mode=""></image> 
14.     </view> 
15. </template> 
16.  
17. <script> 
18.     export default { 
19.         data() { 
20.             return { 
21.                 title: 'Hello', 
22.                 apiKey: '', 
23.                 SecretKey: '', 
24.                 base64str: '' 
25.             } 
26.         }, 
27.         onLoad() { 
28.             // 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key  和  Secret Key 
29.             this.apiKey = uni.getStorageSync('apiKey') 
30.             this.SecretKey = uni.getStorageSync('SecretKey') 
31.         }, 
32.         methods: { 
33.             test() { 
34.                 let that = this 
35.                 let access_token = uni.getStorageSync('access_token') 
36.                  
37.                 uni.chooseImage({ 
38.                     count: 1, //默认9 
39.                     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 
40.                     sourceType: ['album'], //从相册选择 
41.                     success: function (res) { 
42.                          
43.                         let tempFilePaths = res.tempFilePaths[0] 
44.                         // 图片转 base64 
45.                         plus.io.resolveLocalFileSystemURL(tempFilePaths, function(entry) { 
46.                             entry.file(function(file) { 
47.                                 var fileReader = new plus.io.FileReader(); 
48.                                 fileReader.readAsDataURL(file); 
49.                                 fileReader.onloadend = function(evt) { 
50.                                     //console.log(evt.target.result); 
51.                                     that.base64str = evt.target.result// 页面显示图片的src 
52.                                     let base64 = evt.target.result.split(",")[1];// 传递给百度识别的 base64 格式的图片文件 
53.                                      
54.                                     // 开始识别 
55.                                     uni.request({ 
56.                                         url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + access_token, 
57.                                         method: 'POST', 
58.                                         data: { 
59.                                             image: base64, 
60.                                             id_card_side: 'back'// 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面 
61.                                         }, 
62.                                         header: { 
63.                                             'Content-Type': 'application/x-www-form-urlencoded' 
64.                                         }, 
65.                                         success: res => { 
66.                                             console.log(res.data) 
67.                                             console.log(res.data.words_result.签发机关.words) 
68.                                             console.log(res.data.words_result.签发日期.words) 
69.                                             console.log(res.data.words_result.失效日期.words) 
70.                                         } 
71.                                     }); 
72.                                 } 
73.                             }) 
74.                         }) 
75.                          
76.                          
77.                          
78.                     } 
79.                 }); 
80.                  
81.             }, 
82.             // access_token 有效期为 2592000 秒 / 30天 
83.             getACSS_TOKEN() { 
84.                 let that = this 
85.                 uni.request({ 
86.                     url: 'https://aip.baidubce.com/oauth/2.0/token', 
87.                     method: 'POST', 
88.                     data: { 
89.                         grant_type: 'client_credentials', 
90.                         client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取 
91.                         client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取 
92.                     }, 
93.                     header: { 
94.                         'Content-Type': 'application/x-www-form-urlencoded' 
95.                     }, 
96.                     success: res => { 
97.                         console.log(res.data) 
98.                         uni.setStorageSync('access_token', res.data.access_token) 
99.                         // console.log(JSON.parse(res.data)) 
100.                     } 
101.                 }); 
102.             } 
103.         } 
104.     } 
105. </script> 
106.  
107. <style> 
108.     .content { 
109.         display: flex; 
110.         flex-direction: column; 
111.         align-items: center; 
112.         justify-content: center; 
113.     } 
114.  
115.     .logo { 
116.         height: 200rpx; 
117.         width: 200rpx; 
118.         margin-top: 200rpx; 
119.         margin-left: auto; 
120.         margin-right: auto; 
121.         margin-bottom: 50rpx; 
122.     } 
123.  
124.     .text-area { 
125.         display: flex; 
126.         justify-content: center; 
127.     } 
128.  
129.     .title { 
130.         font-size: 36rpx; 
131.         color: #8f8f94; 
132.     } 
133. </style>