一、準備工作
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 })
三、效果展示
