微信小程序云开发-云存储的应用-识别驾驶证

一、准备工作

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 }

二、创建页面并写相应代码

创建页面IdentifyDriverLicense，用于OCR识别驾驶证信息

1、IdentifyDriverLicense.wxml

 1 <!-- 识别驾驶证信息 -->
 2 <button bindtap="identifyDriverLicense" type="primary">识别驾驶证</button>
 3 <!-- 把识别到的驾驶证图片显示到页面上 -->
 4 <view class="idcard">
 5 <image src="{{driverLicenseURL}}" ></image>
 6 </view>
 7 <!-- 把识别到的驾驶证信息显示到页面上 -->
 8 <view class="front" wx:if="{{showdriverLicense}}">
 9   <view>身份证号：{{driverLicenseMsg.idNum}}</view>
10 <view>姓名：{{driverLicenseMsg.name}}</view>
11 <view>性别：{{driverLicenseMsg.sex}}</view>
12 <view>国籍：{{driverLicenseMsg.nationality}}</view>
13 <view>住址：{{driverLicenseMsg.address}}</view>
14 <view>出生日期：{{driverLicenseMsg.birthDate}}</view>
15 <view>初次领证日期：{{driverLicenseMsg.issueDate}}</view>
16 <view>准驾车型：{{driverLicenseMsg.carClass}}</view>
17 <view>有效期开始：{{driverLicenseMsg.validFrom}}</view>
18 <view>有效期结束：{{driverLicenseMsg.validTo}}</view>
19 <view>发证机关：{{driverLicenseMsg.officialSeal}}</view>
20 </view>

2、IdentifyDriverLicense.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、IdentifyDriverLicense.js

 1 // pages/IdentifyDriverLicense/IdentifyDriverLicense.js
 2 Page({
 3 //初始化数据
 4   data:{
 5     showdriverLicense:false,
 6     driverLicenseMsg:{}
 7   },
 8
 9 //识别驾驶证信息
10   identifyDriverLicense(){
11     //选择图片
12     wx.chooseImage({
13     count: 1,
14     sizeType: ['original', 'compressed'],
15     sourceType: ['album', 'camera'],
16   }).then(res=>{
17     console.log("图片选择成功",res);
18     console.log("所选图片的临时链接",res.tempFilePaths[0]);
19     //上传图片
20     wx.cloud.uploadFile({
21       cloudPath: (new Date()).valueOf()+'.png',
22       filePath: res.tempFilePaths[0],
23     }).then(res=>{
24       console.log("图片上传到云存储成功",res);
25       console.log("图片在云存储里的fileID",res.fileID);
26       //将上传成功的图片显示到页面上
27       this.setData({
28         driverLicenseURL:res.fileID,
29       })
30       //获取图片真实URL
31       wx.cloud.getTempFileURL({
32         fileList:[res.fileID]
33       }).then(res=>{
34         console.log("获取图片真实链接成功",res);
35         //识别身份证背面信息
36         wx.cloud.callFunction({
37           name:"identify",
38           data:{
39             imgUrl:res.fileList[0].tempFileURL,   //传递参数给云函数
40             action:"3"       //action为1表示身份证，2表示银行卡，3表示驾驶证（在云函数中自定义的）
41           }
42         }).then(res=>{
43           console.log("图片识别成功",res);
44           this.setData({
45             driverLicenseMsg:res.result,
46             showdriverLicense:true
47           })
48         }).catch(err=>{
49           console.log("图片识别失败",err);
50         })
51       }).catch(err=>{
52         console.log("获取图片真实链接失败",err);
53       })
54     }).catch(err=>{
55       console.log("图片上传到云存储失败",err);
56     })
57
58   }).catch(err=>{
59     console.log("图片选择失败",err);
60   })
61   }
62 })

三、效果展示