小程序識別身份證，銀行卡，營業(yè)執(zhí)照，駕照的實現(xiàn)
最近老是有同學問我小程序ocr識別的問題，就趁機研究了下，實現(xiàn)了小程序識別身份證，銀行卡，駕照，營業(yè)執(zhí)照，圖片文字的功能。今天來給大家講講詳細的實現(xiàn)流程。
先畫一張流程圖出來
第一次看到這個流程圖，可能有點萌，什么云開發(fā)，云函數(shù)。。。。
不要著急，我們接下來會一步步帶大家實現(xiàn)。
先看下我們的頁面和效果圖。
功能其實很簡單，就是我們點對應的按鈕后，去拍照或者去相冊選擇對應的圖片。然后把圖片上傳到云存儲，會有一個對應的圖片url，然后把這個圖片url傳遞到云函數(shù)，然后云函數(shù)里使用小程序的開發(fā)ocr能力，來識別圖片，返回對應的信息回來。如下圖所示，我們識別銀行卡（身份證什么的就不演示了，涉及到石頭哥個人隱私）
接下來就是代碼的實現(xiàn)了。
一，首先要創(chuàng)建一個云開發(fā)的小程序項目
這里我前面文章有講解過，就不再細說了，不會的同學去翻看下我之前的文章?；蛘呖聪挛忆浿频闹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)
}
})
},
//調用云函數(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)
}
})
}
})
上面代碼注釋講解的很清楚了，再結合我們的流程圖，相信你可以看明白。
三，重頭戲來了，識別的核心代碼是下面這個云函數(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方法，根據用戶傳入的不同的type值，來實現(xiàn)不同的識別效果。
如用傳入的type是‘ yinhangka'，我們就調用銀行卡識別
try {
const result = await cloud.openapi.ocr.bankcard({
type: 'photo',
imgUrl: imgUrl
})
return result
} catch (err) {
console.log(err)
return err
}
進而把識別的結果返回給小程序端，如下圖
到這里我們就完整的實現(xiàn)了，小程序識別身份證，銀行卡，行駛證的功能。至于別的更多的ocr識別，可以去看小程序官方文檔，結合著我的這篇文章，相信你也可以輕松實現(xiàn)更多的圖片識別。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
類似QQ等級2008-09-09
這篇文章主要介紹了JavaScript組合拼接字符串的效率對比測試,本文測試了IE6、Firefox、Mozilla、Netscape、Opera等瀏覽器,需要的朋友可以參考下2014-11-11
本文將詳細介紹Canvas + JavaScript 制作圖片粒子效果的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
說到Javascript的類繼承，就必然離不開原型鏈，但只通過原型鏈實現(xiàn)的繼承有著不少缺陷。2011-03-03
這篇文章主要介紹了JavaScript實現(xiàn)網頁截圖功能,本文介紹了2款實現(xiàn)JavaScript截圖的開源組件,一個是Canvas2Image,一個是html2canvas,需要的朋友可以參考下2014-10-10
微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果
小程序還沒有使用pc端的那種分頁格式,下面這篇文章主要給大家介紹了關于微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果的相關資料,需要的朋友可以參考下2022-10-10
云函數(shù)是部署在云端的函數(shù)，他和小程序本地的函數(shù)存在很大的區(qū)別。本文將通過示例詳細為大家介紹如何在小程序開發(fā)中使用云函數(shù)，需要的可以參考一下2022-03-03
這篇文章主要介紹了兩個JS之間的函數(shù)互相調用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
JavaScript中的6種變體函數(shù)的區(qū)別和應用
JavaScript?中函數(shù)調用有許多獨特的變體方式,例如?~function、-function?等,這些變體不僅展現(xiàn)了?JavaScript?語言的靈活性,也可以在某些場景下讓代碼更加簡潔,本文將通過示例代碼和解析,來全面剖析這些特殊的函數(shù)調用方式及其返回值的區(qū)別2025-01-01
這篇文章主要給大家介紹了關于CSS、JS文件無法正確加載至頁面問題與解決辦法,文中通過圖文以及代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01