微信小程序云开发-云存储的应用-识别身份证(正面和反面)

本文转载自查看原文 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识别身份证信息微信小程序云开发-云存储-上传文件（图片/视频）到云存储精简代码微信小程序云开发-云存储-上传文件（word/excel/ppt/pdf）到云存储小程序身份证号检测函数微信小程序云开发-云存储-获取带图片的商品列表微信小程序云开发-云存储-下载并打开文件文件（word/excel/ppt/pdf）微信小程序开发-本地存储微信小程序云开发