微信小程序雲開發-雲存儲的應用-識別身份證(正面和反面)

本文轉載自查看原文 2021-07-23 10:54 151 微信小程序

一、准備工作

1、創建雲函數identify

2、雲函數identify中index.js代碼

 1 // 雲函數入口文件
 2 const cloud = require('wx-server-sdk')
 3 
 4 //cloud.init()
 5 //環境變量初始化 
 6 cloud.init({
 7   evn:cloud.DYNAMIC_CURRENT_ENV   //標志當前所在環境
 8 })
 9 
10 // 雲函數入口函數
11 exports.main = async (event,context) => {
12   const wxContext = cloud.getWXContext()
13   if(event.action=="1"){    //action為1 返回身份證的信息
14   try {
15     const result = await cloud.openapi.ocr.idcard({
16         "type": 'photo',
17         "imgUrl": event.imgUrl  
18       })
19     return result
20   } catch (err) {
21     return err
22   }
23 }else if(event.action=="2"){  //action為2 返回銀行卡的信息
24   try {
25     const result = await cloud.openapi.ocr.bankcard({
26         "type": 'photo',
27         "imgUrl": event.imgUrl
28       })
29     return result
30   } catch (err) {
31     return err
32   }
33 }else if(event.action=="3"){  //action為3 返回駕駛證的信息
34   try {
35     const result = await cloud.openapi.ocr.driverLicense({
36         "type": 'photo',
37         "imgUrl": event.imgUrl
38       })
39     return result
40   } catch (err) {
41     return err
42   }
43 }else if(event.action=="4"){        //action為4 返回行駛證的信息
44   try {
45     const result = await cloud.openapi.ocr.vehicleLicense({
46         "type": 'photo',
47         "imgUrl": event.imgUrl
48       })
49     return result
50   } catch (err) {
51     return err
52   }
53 }else if(event.action=="5"){        //action為5 返回營業執照的信息
54   try {
55     const result = await cloud.openapi.ocr.businessLicense({
56         "imgUrl": event.imgUrl
57       })
58     return result
59   } catch (err) {
60     return err
61   }
62 }else if(event.action=="6"){        //action為6 返回通用印刷體的信息
63   try {
64     const result = await cloud.openapi.ocr.businessLicense({
65         "imgUrl": event.imgUrl
66       })
67     return result
68   } catch (err) {
69     return err
70   }
71 }
72 }

二、創建頁面並寫相應代碼

創建頁面IdentifyIdcard，用於OCR識別身份證正面和反面

1、IdentifyIdcard.wxml

<button bindtap="identifyIdcardFront" type="primary">識別身份證正面</button>

<!-- 把識別到的身份證正面圖片顯示到頁面上 -->
<view class="idcard">
<image src="{{idcardFrontURL}}"></image>
</view>
<!-- 把識別到的身份證正面信息顯示到頁面上 -->
<view class="front" wx:if="{{showIdCardFront}}">
<view>正反：{{idcardFrontMsg.type}}</view>
<view>身份證號：{{idcardFrontMsg.id}}</view>
<view>姓名：{{idcardFrontMsg.name}}</view>
<view>住址：{{idcardFrontMsg.addr}}</view>
<view>性別：{{idcardFrontMsg.gender}}</view>
<view>民族：{{idcardFrontMsg.nationality}}</view>
</view>

<button bindtap="identifyIdcardBack" type="primary">識別身份證背面</button>

<!-- 把識別到的身份證背面圖片顯示到頁面上 -->
<view class="idcard">
<image src="{{idcardBackURL}}" ></image>
</view>
<!-- 把識別到的身份證背面信息顯示到頁面上 -->
<view class="front" wx:if="{{showIdCardBack}}">
<view>正反：{{idcardBankMsg.type}}</view>
<view>有效期：{{idcardBankMsg.validDate}}</view>
<view>公安局：{{idcardBankMsg.authority}}</view>
<view>屬性：{{idcardBankMsg.cardProperty}}</view>
</view>

2、IdentifyIdcard.wxss

 1 button{
 2   margin: 20rpx;
 3 }
 4 .front{
 5   margin: 20rpx;
 6 }
 7 
 8 .idcard{
 9   text-align: center;
10 }
11 .idcard image{
12   width: 95%rpx;
13   height: 300rpx;
14 }

3、IdentifyIdcard.js

  1 Page({
  2   //初始化數據
  3   data:{
  4     showIdCardFront:false,
  5     showIdCardBack:false,
  6     //定義對象，存放需要展示在頁面的信息
  7     idcardFrontMsg:{},
  8     idcardBankMsg:{},
  9   },
 10 /*
 11 識別身份信息。分為4步：
 12     //第一步：選擇圖片
 13     //第二步：上傳圖片到雲存儲
 14     //第三步：獲取雲存儲圖片的真實鏈接
 15     //第四步：OCR識別圖片信息
 16 */
 17 
 18 //識別身份證正面信息
 19 identifyIdcardFront(){
 20   //調用函數，實現選擇圖片
 21   this.chooseImage()
 22 },
 23 
 24 //自定義函數，從相冊/拍照選擇圖片
 25 chooseImage(){
 26   wx.chooseImage({
 27     count: 1,
 28     sizeType: ['original', 'compressed'],
 29     sourceType: ['album', 'camera'],
 30   }).then(res=>{
 31     console.log("圖片選擇成功",res);
 32     console.log("所選圖片的臨時鏈接",res.tempFilePaths[0]);
 33     //調用函數，實現上傳圖片到雲存儲(傳遞參數為臨時鏈接)
 34     this.uploadFile(res.tempFilePaths[0])   
 35   }).catch(err=>{
 36     console.log("圖片選擇失敗",err);
 37   })
 38 },
 39 
 40 //自定義函數，上傳所選圖片到雲存儲
 41 uploadFile(tempFile){
 42   wx.cloud.uploadFile({
 43     cloudPath: (new Date()).valueOf()+'.png',
 44     filePath: tempFile, 
 45   }).then(res=>{
 46     console.log("圖片上傳到雲存儲成功",res);
 47     console.log("圖片在雲存儲里的fileID",res.fileID);
 48     //調用函數，實現獲取圖片的真實鏈接（傳遞參數為雲存儲的fileID）
 49     this.getImageURL(res.fileID)  
 50     //將上傳成功的圖片顯示到頁面上
 51     this.setData({
 52       idcardFrontURL:res.fileID
 53     })
 54   }).catch(err=>{
 55     console.log("圖片上傳到雲存儲失敗",err);
 56   })
 57 },
 58 
 59 //自定義函數，用獲取雲函數圖片的真實鏈接
 60 getImageURL(fileID){
 61   wx.cloud.getTempFileURL({
 62     fileList:[fileID]
 63   }).then(res=>{
 64     console.log("獲取圖片真實鏈接成功",res);
 65     //調用函數，實現識別身份證信息（傳遞參數為圖片在雲存儲中的真實鏈接）
 66     this.identify(res.fileList[0].tempFileURL)  
 67   }).catch(err=>{
 68     console.log("獲取圖片真實鏈接失敗",err);
 69   })      
 70 },
 71 
 72 //自定義函數，識別身份證信息
 73 identify(imgUrl){
 74   //調用雲函數OCR識別身份證信息
 75   wx.cloud.callFunction({
 76     name:"identify",
 77     data:{
 78       imgUrl:imgUrl,   //傳遞參數給雲函數
 79       action:"1"
 80     }
 81   }).then(res=>{
 82     console.log("身份證圖片識別成功",res);
 83     this.setData({
 84       idcardFrontMsg:res.result,
 85       showIdCardFront:true,
 86       showIdCardBack:false,
 87     })
 88   }).catch(err=>{
 89     console.log("身份證圖片識別失敗",err);
 90   })
 91 },
 92 
 93 //識別身份證背面信息
 94 identifyIdcardBack(){
 95   //選擇圖片
 96   wx.chooseImage({
 97     count: 1,
 98     sizeType: ['original', 'compressed'],
 99     sourceType: ['album', 'camera'],
100   }).then(res=>{
101     console.log("圖片選擇成功",res);
102     console.log("所選圖片的臨時鏈接",res.tempFilePaths[0]);
103     //上傳圖片
104     wx.cloud.uploadFile({
105       cloudPath: (new Date()).valueOf()+'.png',
106       filePath: res.tempFilePaths[0], 
107     }).then(res=>{
108       console.log("圖片上傳到雲存儲成功",res);
109       console.log("圖片在雲存儲里的fileID",res.fileID);
110       //將上傳成功的圖片顯示到頁面上
111       this.setData({
112         idcardBackURL:res.fileID,
113       })
114       //獲取圖片真實URL
115       wx.cloud.getTempFileURL({
116         fileList:[res.fileID]
117       }).then(res=>{
118         console.log("獲取圖片真實鏈接成功",res);
119         //識別身份證背面信息
120         wx.cloud.callFunction({
121           name:"identify",
122           data:{
123             imgUrl:res.fileList[0].tempFileURL,   //傳遞參數給雲函數
124             action:"1"       //action為1表示身份證，2表示銀行卡，3表示駕駛證（在雲函數中自定義的）
125           }
126         }).then(res=>{
127           console.log("身份證圖片識別成功",res);
128           this.setData({
129             idcardBankMsg:res.result,
130             showIdCardBack:true,
131           })  
132         }).catch(err=>{
133           console.log("身份證圖片識別失敗",err);
134         })
135       }).catch(err=>{
136         console.log("獲取圖片真實鏈接失敗",err);
137       })   
138     }).catch(err=>{
139       console.log("圖片上傳到雲存儲失敗",err);
140     })
141 
142   }).catch(err=>{
143     console.log("圖片選擇失敗",err);
144   })
145 }
146 })

三、效果展示

1、圖片展示

2、視頻展示

································································································································································································

報錯分析：

1、報錯：調用雲函數識別身份證時，報錯fail not enough market quota hint

解決方案：

1、進入微信服務平台購買https://developers.weixin.qq.com/community/servicemarket/detail/000ce4cec24ca026d37900ed551415

2、選擇自己想要的規格。然后授權你的小程序，提交訂單購買即可。

3、重新編譯，即可成功獲取result信息。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序中如何識別銀行卡和身份證微信小程序接入百度OCR（身份證識別）微信小程序接入百度OCR（身份證識別）微信小程序雲開發-雲存儲的應用-雲相冊騰訊雲識別香港身份證阿里雲身份證識別demo 微信小程序中如何上傳圖片來識別身份證銀行卡？微信小程序雲開發學習筆記（三）雲存儲微信小程序雲開發-雲存儲-上傳文件（圖片/視頻）到雲存儲精簡代碼微信小程序雲開發-雲存儲-上傳文件（word/excel/ppt/pdf）到雲存儲