身份证识别功能

manifest.json

@@ -103,7 +103,15 @@
             "enable" : false
         },
         "devServer" : {
-            "https" : true
+            "https" : true,
+            "proxy": { 
+			"/api": {
+				"target": "https://aip.baidubce.com", 
+				"pathRewrite": {
+					"^/api": "" 
+				}
+			}
+		}
         },
         "sdkConfigs" : {
             "maps" : {

pages/login/login.vue

@@ -38,10 +38,7 @@ export default {
                 password: '',
 				app:'gov',
 				client:'h5',
-				customerId:'1844965320640274433'//
-                // '1861289756549029889' 
-                //45687aa479955f9d06204d415238f7cc
-                // appId: ''
+				customerId:'1861289756549029889'
             }
         };
     }

subpages/OCRCard/pages/index/common/base64.js

@@ -0,0 +1,43 @@
+/**
+ * @description 本地图片转base64方法（兼容APP、H5、小程序）
+ * @param {number} path 图片本地路径
+ * @returns Promise对象
+ */
+const toBase64 = (path) => {
+	return new Promise((resolve, reject) => {
+		// #ifdef APP-PLUS
+		plus.io.resolveLocalFileSystemURL(path, (entry) => {
+			entry.file((file) => {
+				let fileReader = new plus.io.FileReader()
+				fileReader.readAsDataURL(file)
+				fileReader.onloadend = (evt) => {
+					let base64 = evt.target.result.split(",")[1]
+					resolve(base64)
+				}
+			})
+		})
+		// #endif
+		// #ifdef H5
+		uni.request({
+			url: path,
+			responseType: 'arraybuffer',
+			success: (res) => {
+				resolve(uni.arrayBufferToBase64(res.data))
+			}
+		})
+		// #endif
+		// #ifdef MP-WEIXIN
+		uni.getFileSystemManager().readFile({
+			filePath: path,
+			encoding: 'base64',
+			success: (res) => {
+				resolve(res.data)
+			}
+		})
+		// #endif
+	})
+}
+
+export {
+	toBase64
+}

subpages/OCRCard/pages/index/index.vue

@@ -12,9 +12,7 @@
                 <b>身份识别：</b>
                 是在居民出示身份证原件或图片的场合下，通过OCR技术拍摄识别身份证信息。
             </view>
-            <ocr-navigator @onSuccess="cardSuccess" certificateType="idCard" :opposite="false" class="ocr">
-                <button hover-class="color">开始识别</button>
-            </ocr-navigator>
+                <button hover-class="color" @click="chooseImage">开始识别</button>
         </view>
     </view>
 </template>
@@ -23,6 +21,9 @@
 // subpages/OCRCard/pages/index/index.js
 const app = getApp();
 import { getResidentBaseInfo } from '../../../../utils/api';
+
+let convert = require('./common/base64.js')
+
 export default {
     components: {},
     data() {
@@ -30,7 +31,11 @@ export default {
             statusHeight: '',
             navigationHeight: '',
             tableData: '',
-            keyWord: ''
+            keyWord: '',
+            dataObj: {
+					client_id: 'MBPxJXn7rCKGt05XwWCU7DSa',
+					client_secret: 'mdZAHO09pBr8RwDlGDR7G3vWE9i082h3',
+			}
         };
     },
     /**
@@ -71,6 +76,89 @@ export default {
      */
     onShareAppMessage() {},
     methods: {
+        chooseImage() {
+				console.log(1111111)
+				let self = this
+				uni.chooseImage({
+					count: 1,
+					success: (ress) => {
+						uni.showLoading({
+							title: '正在识别中...'
+						})
+						// this.$emit('start', {
+						// 	animal: true,
+						// 	img: res.tempFilePaths[0]
+						// })
+						// 下面将图片本地路径转base64
+						convert.toBase64(ress.tempFilePaths[0]).then((res) => {
+							self.getAccessToken(res, ress)
+						})
+					},
+					fail(err) {
+						uni.hideLoading()
+						console.log(err)
+					}
+				})
+			},
+            getAccessToken(path, ress) {
+				let self = this
+				uni.request({
+					url: 'https://aip.baidubce.com/oauth/2.0/token',//生产https://aip.baidubce.com/oauth/2.0/token 测试 /api/oauth/2.0/token
+					data: {
+						grant_type: 'client_credentials',
+						client_id: self.dataObj.client_id,
+						client_secret: self.dataObj.client_secret
+					},
+					method: 'POST',
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded'
+					},
+					success: (res) => {
+                        self.uploadImage(path, res.data.access_token, ress)
+						uni.hideLoading()
+					},
+					fail(err) {
+						uni.hideLoading()
+						console.log(err)
+					}
+				})
+			},
+            uploadImage(path, token, ress) {
+				let self = this
+				uni.request({
+					url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',//生产https://aip.baidubce.com/rest/2.0/ocr/v1/idcard 测试 /api/rest/2.0/ocr/v1/idcard
+					data: {
+						image: path,
+						access_token: token,
+						id_card_side: 'back'
+					},
+					method: 'POST',
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded'
+					},
+					success: (res) => {
+						uni.hideLoading()
+						self.$emit('end', {
+							path: ress,
+							animal: false,
+							words: res.data
+						})
+                        if(res.data.words_result.公民身份号码){
+                            self.cardSuccess(res.data.words_result.公民身份号码.value)
+                        }else{
+                            uni.showToast({
+                                title:'未识别到身份信息，请重新上传！',
+                                duration:3000,
+                                icon:'none'
+                            })
+                        }
+					},
+					fail(err) {
+						uni.hideLoading()
+						console.log(err)
+					}
+				})
+			},
         getTable: async function (type) {
             let parm = {
                 searchKey: this.keyWord,
@@ -87,9 +175,8 @@ export default {
         },
 
         cardSuccess: async function (e) {
-            console.log(e.detail);
             this.setData({
-                keyWord: e.detail.id.text,
+                keyWord: e,
                 tableData: []
             });
             // 跳转至居民详情页

vue.config.js

@@ -6,6 +6,13 @@ module.exports = {
         target: 'https://apis.map.qq.com',
         changeOrigin: true,
         pathRewrite: { '^map-api': '' }
+      },
+      '/api': {
+        target: 'https://aip.baidubce.com', // 目标服务器
+        changeOrigin: true, // 允许跨域
+        pathRewrite: {
+          '^/api': '', // 将 /api 替换为空
+        }
       }
     }
   }