快捷導(dǎo)航

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

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

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

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

先畫一張流程圖出來(lái)

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

不要著急，我們接下來(lái)會(huì)一步步帶大家實(shí)現(xiàn)。

先看下我們的頁(yè)面和效果圖。

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

接下來(lái)就是代碼的實(shí)現(xiàn)了。

一，首先要?jiǎng)?chuàng)建一個(gè)云開發(fā)的小程序項(xiàng)目

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

這里有一點(diǎn)需要注意的給大家說(shuō)下

二，創(chuàng)建一個(gè)簡(jiǎn)單的小程序頁(yè)面

1，index.wxml如下

2，index.js完整代碼如下

Page({

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

 //拍照或者從相冊(cè)選擇要識(shí)別的照片
 photo(type) {
  let that = this
  wx.chooseImage({
   count: 1,
   sizeType: ['original', 'compressed'],
   sourceType: ['album', 'camera'],
   success(res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    let imgUrl = res.tempFilePaths[0];
    that.uploadImg(type, imgUrl)
   }
  })
 },

 // 上傳圖片到云存儲(chǔ)
 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)
   }
  })
 },

 //獲取云存儲(chǔ)里的圖片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ù)，實(shí)現(xiàn)OCR識(shí)別
 shibie(type, imgUrl) {
  wx.cloud.callFunction({
   name: "ocr",
   data: {
    type: type,
    imgUrl: imgUrl
   },
   success(res) {
    console.log("識(shí)別成功", res)
   },
   fail(res) {
    console.log("識(shí)別失敗", res)
   }
  })
 }
})

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

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

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

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

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

//識(shí)別身份證
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
 }
}
//識(shí)別銀行卡
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
 }
}
//識(shí)別行駛證
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
 }
}

其實(shí)沒(méi)什么特別的，就是用一個(gè)switch方法，根據(jù)用戶傳入的不同的type值，來(lái)實(shí)現(xiàn)不同的識(shí)別效果。

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

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

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