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

小程序識(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)流程。

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

第一次看到這個(gè)流程圖,可能有點(diǎn)萌,什么云開(kāi)發(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ù)里使用小程序的開(kāi)發(fā)ocr能力,來(lái)識(shí)別圖片,返回對(duì)應(yīng)的信息回來(lái)。如下圖所示,我們識(shí)別銀行卡(身份證什么的就不演示了,涉及到石頭哥個(gè)人隱私)

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

一,首先要?jiǎng)?chuàng)建一個(gè)云開(kāi)發(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é)果返回給小程序端,如下圖

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

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

相關(guān)文章

  • 微信小程序 搜索框組件代碼實(shí)例

    微信小程序 搜索框組件代碼實(shí)例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    這篇文章主要介紹了javascript中的Boolean對(duì)象知識(shí)點(diǎn),對(duì)Boolean對(duì)象的基本使用方法進(jìn)行解釋?zhuān)欢魏茉敿?xì)的代碼介紹,感興趣的小伙伴們可以參考一下
    2015-11-11
  • js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果

    js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果

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

    如何在JavaScript中比較日期詳解

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

最新評(píng)論