微信小程式雲開發-雲端儲存的應用-識別通用印刷體

一、準備工作

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.printedText({
        "imgUrl": event.imgUrl
      })
    return result
  } catch (err) {
    return err
  }
}
}

二、建立頁面並寫相應程式碼

建立頁面IdentifyPrintedText，用於OCR識別通用印刷體

 

 

  1、IdentifyPrintedText.wxml

<!-- 識別通用印刷體資訊 -->
<button bindtap="IdentifyPrintedText" type="primary">識別通用印刷體</button>
<!-- 把識別到的通用印刷體圖片顯示到頁面上 -->
<view class="idcard">
<image src="{{IdentifyPrintedTextURL}}" ></image>
</view>
<!-- 把識別到的通用印刷體資訊顯示到頁面上 -->
<view class="front" wx:if="{{showdPrintedText}}">
  <view wx:for="{{PrintedTextMsg.items}}" wx:key="index" class="con">{{item.text}}</view>
  <view class="imgSize">【圖片大小】：{{PrintedTextMsg.imgSize.w}}*{{PrintedTextMsg.imgSize.h}}</view>
</view>

  2、IdentifyPrintedText.wxss

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

.idcard{
  text-align: center;
}
.idcard image{
  width: 95%rpx;
  height: 600rpx;
}
.imgSize{
margin-top: 100rpx;
}

 3、IdentifyPrintedText.js

// pages/IdentifyDriverLicense/IdentifyDriverLicense.js
Page({
  //初始化資料
    data:{
      showdBusinessLicense:false,
      BusinessLicenseMsg:{}
    },
  
  //識別駕駛證資訊
  IdentifyPrintedText(){
      //選擇圖片
      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({
          IdentifyPrintedTextURL: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:"6"       //action為1表示身份證，2表示銀行卡，3表示駕駛證，4表示行駛證，5表示營業執照，6表示通用印刷體（在雲函式中自定義的）
            }
          }).then(res=>{
            console.log("圖片識別成功",res);
            this.setData({
              PrintedTextMsg:res.result,
              showdPrintedText:true
            })  
          }).catch(err=>{
            console.log("圖片識別失敗",err);
          })
        }).catch(err=>{
          console.log("獲取圖片真實連結失敗",err);
        })   
      }).catch(err=>{
        console.log("圖片上傳到雲端儲存失敗",err);
      })
  
    }).catch(err=>{
      console.log("圖片選擇失敗",err);
    }) 
    }
  })

三、效果展示