小程序識(shí)別身份證,銀行卡,營(yíng)業(yè)執(zhí)照,駕照的實(shí)現(xiàn)
最近老是有同學(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)文章
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-07Bootstrap實(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每天一篇javascript學(xué)習(xí)小結(jié)(Boolean對(duì)象)
這篇文章主要介紹了javascript中的Boolean對(duì)象知識(shí)點(diǎn),對(duì)Boolean對(duì)象的基本使用方法進(jìn)行解釋?zhuān)欢魏茉敿?xì)的代碼介紹,感興趣的小伙伴們可以參考一下2015-11-11js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
這篇文章主要介紹了js隨機(jī)抽獎(jiǎng)代碼效果,大家參考使用2013-12-12