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

一、准备工作

1、创建云函数identify

 

 

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

// 云函数入口文件
const cloud = require('wx-server-sdk')

//cloud.init()
//环境变量初始化
cloud.init({
  evn:cloud.DYNAMIC_CURRENT_ENV   //标志当前所在环境
})

// 云函数入口函数
exports.main = async (event,context) => {
  const wxContext = cloud.getWXContext()
  if(event.action=="1"){    //action为1 返回身份证的信息
  try {
    const result = await cloud.openapi.ocr.idcard({
        "type": 'photo',
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}else if(event.action=="2"){  //action为2 返回银行卡的信息
  try {
    const result = await cloud.openapi.ocr.bankcard({
        "type": 'photo',
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}else if(event.action=="3"){  //action为3 返回驾驶证的信息
  try {
    const result = await cloud.openapi.ocr.driverLicense({
        "type": 'photo',
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}else if(event.action=="4"){        //action为4 返回行驶证的信息
  try {
    const result = await cloud.openapi.ocr.vehicleLicense({
        "type": 'photo',
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}else if(event.action=="5"){        //action为5 返回营业执照的信息
  try {
    const result = await cloud.openapi.ocr.businessLicense({
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}else if(event.action=="6"){        //action为6 返回通用印刷体的信息
  try {
    const result = await cloud.openapi.ocr.businessLicense({
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}
}

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

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

1、IdentifyDriverLicense.wxml

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

2、IdentifyDriverLicense.wxss

button{
  margin: 20rpx;
}
.front{
  margin: 20rpx;
}

.idcard{
  text-align: center;
}
.idcard image{
  width: 95%rpx;
  height: 300rpx;
}

3、IdentifyDriverLicense.js

// pages/IdentifyDriverLicense/IdentifyDriverLicense.js
Page({
//初始化数据
  data:{
    showdriverLicense:false,
    driverLicenseMsg:{}
  },

//识别驾驶证信息
  identifyDriverLicense(){
    //选择图片
    wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
  }).then(res=>{
    console.log("图片选择成功",res);
    console.log("所选图片的临时链接",res.tempFilePaths[0]);
    //上传图片
    wx.cloud.uploadFile({
      cloudPath: (new Date()).valueOf()+'.png',
      filePath: res.tempFilePaths[0], 
    }).then(res=>{
      console.log("图片上传到云存储成功",res);
      console.log("图片在云存储里的fileID",res.fileID);
      //将上传成功的图片显示到页面上
      this.setData({
        driverLicenseURL:res.fileID,
      })
      //获取图片真实URL
      wx.cloud.getTempFileURL({
        fileList:[res.fileID]
      }).then(res=>{
        console.log("获取图片真实链接成功",res);
        //识别身份证背面信息
        wx.cloud.callFunction({
          name:"identify",
          data:{
            imgUrl:res.fileList[0].tempFileURL,   //传递参数给云函数
            action:"3"       //action为1表示身份证，2表示银行卡，3表示驾驶证（在云函数中自定义的）
          }
        }).then(res=>{
          console.log("图片识别成功",res);
          this.setData({
            driverLicenseMsg:res.result,
            showdriverLicense:true
          })  
        }).catch(err=>{
          console.log("图片识别失败",err);
        })
      }).catch(err=>{
        console.log("获取图片真实链接失败",err);
      })   
    }).catch(err=>{
      console.log("图片上传到云存储失败",err);
    })

  }).catch(err=>{
    console.log("图片选择失败",err);
  }) 
  }
})

三、效果展示