快捷導(dǎo)航

小程序識別身份證，銀行卡，營業(yè)執(zhí)照，駕照的實現(xiàn)

更新時間：2019年11月05日 10:40:24 作者：編程小石頭

這篇文章主要介紹了小程序識別身份證，銀行卡，營業(yè)執(zhí)照，駕照的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近老是有同學(xué)問我小程序ocr識別的問題，就趁機研究了下，實現(xiàn)了小程序識別身份證，銀行卡，駕照，營業(yè)執(zhí)照，圖片文字的功能。今天來給大家講講詳細的實現(xiàn)流程。

先畫一張流程圖出來

第一次看到這個流程圖，可能有點萌，什么云開發(fā)，云函數(shù)。。。。

不要著急，我們接下來會一步步帶大家實現(xiàn)。

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

功能其實很簡單，就是我們點對應(yīng)的按鈕后，去拍照或者去相冊選擇對應(yīng)的圖片。然后把圖片上傳到云存儲，會有一個對應(yīng)的圖片url，然后把這個圖片url傳遞到云函數(shù)，然后云函數(shù)里使用小程序的開發(fā)ocr能力，來識別圖片，返回對應(yīng)的信息回來。如下圖所示，我們識別銀行卡（身份證什么的就不演示了，涉及到石頭哥個人隱私）

接下來就是代碼的實現(xiàn)了。

一，首先要創(chuàng)建一個云開發(fā)的小程序項目

這里我前面文章有講解過，就不再細說了，不會的同學(xué)去翻看下我之前的文章?；蛘呖聪挛忆浿频闹v解視頻

這里有一點需要注意的給大家說下

二，創(chuàng)建一個簡單的小程序頁面

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)
   }
  })
 },

 //調(diào)用云函數(shù)，實現(xiàn)OCR識別
 shibie(type, imgUrl) {
  wx.cloud.callFunction({
   name: "ocr",
   data: {
    type: type,
    imgUrl: imgUrl
   },
   success(res) {
    console.log("識別成功", res)
   },
   fail(res) {
    console.log("識別失敗", res)
   }
  })
 }
})

上面代碼注釋講解的很清楚了，再結(jié)合我們的流程圖，相信你可以看明白。

三，重頭戲來了，識別的核心代碼是下面這個云函數(shù)

云函數(shù)的完整代碼也給大家貼出來

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

// 云函數(shù)入口函數(shù)
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方法，根據(jù)用戶傳入的不同的type值，來實現(xiàn)不同的識別效果。

如用傳入的type是‘ yinhangka'，我們就調(diào)用銀行卡識別

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

進而把識別的結(jié)果返回給小程序端，如下圖