小程序識別身份證，銀行卡，營業執照，駕照

時間 2019-11-08

標籤程序識別身份證營業執照駕照简体版

原文原文鏈接

最近總是有同窗問我小程序ocr識別的問題，就趁機研究了下，實現了小程序識別身份證，銀行卡，駕照，營業執照，圖片文字的功能。今天來給你們講講詳細的實現流程。小程序

先畫一張流程圖出來

第一次看到這個流程圖，可能有點萌，什麼雲開發，雲函數。。。。不要着急，咱們接下來會一步步帶你們實現。

先看下咱們的頁面和效果圖。

功能其實很簡單，就是咱們點對應的按鈕後，去拍照或者去相冊選擇對應的圖片。而後把圖片上傳到雲存儲，會有一個對應的圖片url，而後把這個圖片url傳遞到雲函數，而後雲函數裏使用小程序的開發ocr能力，來識別圖片，返回對應的信息回來。以下圖所示，咱們識別銀行卡（身份證什麼的就不演示了，涉及到石頭哥我的隱私）

接下來就是代碼的實現了。

一，首先要建立一個雲開發的小程序項目

這裏我前面文章有講解過，就再也不細說了，不會的同窗去翻看下我以前的文章。或者看下我錄製的講解視頻這裏有一點須要注意的給你們說下 api

二，建立一個簡單的小程序頁面

1，index.wxml以下
2，index.js完整代碼以下

Page({

  //身份證
  shenfenzheng() {
    this.photo("shenfenzheng")
  },
  //銀行卡
  yinhangka() {
    this.photo("yinhangka")
  },
  //行駛證
  xingshizheng() {
    this.photo("xingshizheng")
  },

  //拍照或者從相冊選擇要識別的照片
  photo(type) {
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath能夠做爲img標籤的src屬性顯示圖片
        let imgUrl = res.tempFilePaths[0];
        that.uploadImg(type, imgUrl)
      }
    })
  },

  // 上傳圖片到雲存儲
  uploadImg(type, imgUrl) {
    let that = this
    wx.cloud.uploadFile({
      cloudPath: 'ocr/' + type + '.png',
      filePath: imgUrl, // 文件路徑
      success: res => {
        console.log("上傳成功", res.fileID)
        that.getImgUrl(type, res.fileID)
      },
      fail: err => {
        console.log("上傳失敗", err)
      }
    })
  },

  //獲取雲存儲裏的圖片url
  getImgUrl(type, imgUrl) {
    let that = this
    wx.cloud.getTempFileURL({
      fileList: [imgUrl],
      success: res => {
        let imgUrl = res.fileList[0].tempFileURL
        console.log("獲取圖片url成功", imgUrl)
        that.shibie(type, imgUrl)
      },
      fail: err => {
        console.log("獲取圖片url失敗", err)
      }
    })
  },

  //調用雲函數，實現OCR識別
  shibie(type, imgUrl) {
    wx.cloud.callFunction({
      name: "ocr",
      data: {
        type: type,
        imgUrl: imgUrl
      },
      success(res) {
        console.log("識別成功", res)
      },
      fail(res) {
        console.log("識別失敗", res)
      }
    })
  }
})
複製代碼

上面代碼註釋講解的很清楚了，再結合咱們的流程圖，相信你能夠看明白。 bash

三，重頭戲來了，識別的核心代碼是下面這個雲函數

雲函數的完整代碼也給你們貼出來

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()

// 雲函數入口函數
exports.main = async(event, context) => {
  let {
    type,
    imgUrl
  } = event
  switch (type) {
    case 'shenfenzheng':
      {
        // 識別身份證
        return shenfenzheng(imgUrl)
      }
    case 'yinhangka':
      {
        // 識別銀行卡
        return yinhangka(imgUrl)
      }
    case 'xingshizheng':
      {
        // 識別行駛證
        return xingshizheng(imgUrl)
      }
    default:
      {
        return
      }
  }
}

//識別身份證
async function shenfenzheng(imgUrl) {
  try {
    const result = await cloud.openapi.ocr.idcard({
      type: 'photo',
      imgUrl: imgUrl
    })
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}
//識別銀行卡
async function yinhangka(imgUrl) {
  try {
    const result = await cloud.openapi.ocr.bankcard({
      type: 'photo',
      imgUrl: imgUrl
    })
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}
//識別行駛證
async function xingshizheng(imgUrl) {
  try {
    const result = await cloud.openapi.ocr.vehicleLicense({
      type: 'photo',
      imgUrl: imgUrl
    })
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}
複製代碼

其實沒什麼特別的，就是用一個switch方法，根據用戶傳入的不一樣的type值，來實現不一樣的識別效果。如用傳入的type是‘ yinhangka’，咱們就調用銀行卡識別async

try {
    const result = await cloud.openapi.ocr.bankcard({
      type: 'photo',
      imgUrl: imgUrl
    })
    return result
  } catch (err) {
    console.log(err)
    return err
  }
複製代碼

進而把識別的結果返回給小程序端，以下圖函數