欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序識別身份證,銀行卡,營業(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é)果返回給小程序端,如下圖

到這里我們就完整的實現(xiàn)了,小程序識別身份證,銀行卡,行駛證的功能。至于別的更多的ocr識別,可以去看小程序官方文檔,結(jié)合著我的這篇文章,相信你也可以輕松實現(xiàn)更多的圖片識別。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序 搜索框組件代碼實例

    微信小程序 搜索框組件代碼實例

    這篇文章主要介紹了微信小程序 搜索框組件代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例

    JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例

    此文適合JavaScript入門級選手閱讀,在JavaScript里什么叫Callback“回調(diào)函數(shù)”,把方法b當做一個參數(shù)傳遞個方法a,當方法a執(zhí)行完后執(zhí)行另外一個指定函數(shù)(這里是b函數(shù)),感興趣的朋友可以了解下哈
    2013-07-07
  • Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例

    Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例

    這篇文章主要介紹了Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能,結(jié)合完整實例形式分析了Bootstrap前端登錄頁面帶驗證碼界面布局與功能實現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下
    2020-03-03
  • 微信小程序?qū)崿F(xiàn)美食展示與收藏功能

    微信小程序?qū)崿F(xiàn)美食展示與收藏功能

    這篇文章主要介紹了如何在微信小程序中實現(xiàn)美食展示與收藏的功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起動手嘗試一下
    2022-03-03
  • JS小游戲之宇宙戰(zhàn)機源碼詳解

    JS小游戲之宇宙戰(zhàn)機源碼詳解

    這篇文章主要介紹了JS小游戲之宇宙戰(zhàn)機源碼,是一款非常經(jīng)典的游戲源碼,包含了游戲設(shè)計中比較常見的邏輯處理,本文附帶了該游戲的完整源碼,需要的朋友可以參考下
    2014-09-09
  • javascript獲取作用在元素上面的樣式屬性代碼

    javascript獲取作用在元素上面的樣式屬性代碼

    遍歷所有樣式屬性,通過判斷其屬性值,是否為'undefined' 或特特的值,來過慮屬性
    2012-09-09
  • 詳解JS中異常與錯誤處理的正確方法

    詳解JS中異常與錯誤處理的正確方法

    這篇文章主要和大家分享了一些JavaScript中異常與錯誤處理的正確方法,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以參考一下
    2023-04-04
  • 每天一篇javascript學(xué)習(xí)小結(jié)(Boolean對象)

    每天一篇javascript學(xué)習(xí)小結(jié)(Boolean對象)

    這篇文章主要介紹了javascript中的Boolean對象知識點,對Boolean對象的基本使用方法進行解釋,一段很詳細的代碼介紹,感興趣的小伙伴們可以參考一下
    2015-11-11
  • js抽獎實現(xiàn)隨機抽獎代碼效果

    js抽獎實現(xiàn)隨機抽獎代碼效果

    這篇文章主要介紹了js隨機抽獎代碼效果,大家參考使用
    2013-12-12
  • 如何在JavaScript中比較日期詳解

    如何在JavaScript中比較日期詳解

    我們在日常開發(fā)過程中經(jīng)常會用到JavaScript語言在前端代碼中,進行日期的選擇,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中比較日期的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11

最新評論