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