微信小程序云开发-云存储的应用-识别银行卡

一、准备工作

1、创建云函数identify。自定义action==“2”的时候识别银行卡信息。

2、云函数identify中index.js代码

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

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

创建页面IdentifyBankcard，用于OCR识别银行卡信息。

 1、IdentifyBankcard.wxml

 1 <!-- 识别银行卡信息 -->
 2 <button bindtap="identifyBankcard" type="primary">识别银行卡</button>
 3 <!-- 把识别到的银行卡图片显示到页面上 -->
 4 <view class="idcard">
 5 <image src="{{bankcardURL}}" ></image>
 6 </view>
 7 <!-- 把识别到的银行卡信息显示到页面上 -->
 8 <view class="front" wx:if="{{showBankCard}}">
 9 <view>银行卡号：{{bankcardMsg.number}}</view>
10 </view>

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

 1 Page({
 2 //初始化数据
 3   data:{
 4     showBankCard:false,
 5     //定义对象，存放需要展示在页面的信息
 6     bankcardMsg:{}
 7   },
 8
 9 //识别银行卡信息
10 identifyBankcard(){
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         bankcardURL: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:"2"       //action为1表示身份证，2表示银行卡，3表示驾驶证（在云函数中自定义的）
41           }
42         }).then(res=>{
43           console.log("图片识别成功",res);
44           this.setData({
45             //显示身份证背面信息
46             bankcardMsg:res.result,
47             showBankCard:true,
48           })
49         }).catch(err=>{
50           console.log("图片识别失败",err);
51         })
52       }).catch(err=>{
53         console.log("获取图片真实链接失败",err);
54       })
55     }).catch(err=>{
56       console.log("图片上传到云存储失败",err);
57     })
58
59   }).catch(err=>{
60     console.log("图片选择失败",err);
61   })
62 }
63 })

三、效果展示