小程序識別身份證,銀行卡,營業(yè)執(zhí)照,駕照的實現(xiàn)
最近老是有同學(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)文章
JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
此文適合JavaScript入門級選手閱讀,在JavaScript里什么叫Callback“回調(diào)函數(shù)”,把方法b當做一個參數(shù)傳遞個方法a,當方法a執(zhí)行完后執(zhí)行另外一個指定函數(shù)(這里是b函數(shù)),感興趣的朋友可以了解下哈2013-07-07Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例
這篇文章主要介紹了Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能,結(jié)合完整實例形式分析了Bootstrap前端登錄頁面帶驗證碼界面布局與功能實現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03每天一篇javascript學(xué)習(xí)小結(jié)(Boolean對象)
這篇文章主要介紹了javascript中的Boolean對象知識點,對Boolean對象的基本使用方法進行解釋,一段很詳細的代碼介紹,感興趣的小伙伴們可以參考一下2015-11-11