用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序識別身份證,銀行卡,營業執照,駕照

Rolan 2019-10-31 00:32

最近老是有同學問我小程序ocr識別的問題,就趁機研究了下,實現了小程序識別身份證,銀行卡,駕照,營業執照,圖片文字的功能。今天來給大家講講詳細的實現流程。先畫一張流程圖出來第一次看到這個流程圖,可能有點 ...

最近老是有同學問我小程序ocr識別的問題,就趁機研究了下,實現了小程序識別身份證,銀行卡,駕照,營業執照,圖片文字的功能。今天來給大家講講詳細的實現流程。

先畫一張流程圖出來

第一次看到這個流程圖,可能有點萌,什么云開發,云函數。。。。 
不要著急,我們接下來會一步步帶大家實現。

先看下我們的頁面和效果圖。

功能其實很簡單,就是我們點對應的按鈕后,去拍照或者去相冊選擇對應的圖片。然后把圖片上傳到云存儲,會有一個對應的圖片url,然后把這個圖片url傳遞到云函數,然后云函數里使用小程序的開發ocr能力,來識別圖片,返回對應的信息回來。如下圖所示,我們識別銀行卡(身份證什么的就不演示了,涉及到石頭哥個人隱私)

接下來就是代碼的實現了。

一,首先要創建一個云開發的小程序項目

這里我前面文章有講解過,就不再細說了,不會的同學去翻看下我之前的文章。或者看下我錄制的 講解視頻 
這里有一點需要注意的給大家說下

二,創建一個簡單的小程序頁面

1,index.wxml如下

2,index.js完整代碼如下

  1. Page({
  2. //身份證
  3. shenfenzheng() {
  4. this.photo("shenfenzheng")
  5. },
  6. //銀行卡
  7. yinhangka() {
  8. this.photo("yinhangka")
  9. },
  10. //行駛證
  11. xingshizheng() {
  12. this.photo("xingshizheng")
  13. },
  14. //拍照或者從相冊選擇要識別的照片
  15. photo(type) {
  16. let that = this
  17. wx.chooseImage({
  18. count: 1,
  19. sizeType: ['original', 'compressed'],
  20. sourceType: ['album', 'camera'],
  21. success(res) {
  22. // tempFilePath可以作為img標簽的src屬性顯示圖片
  23. let imgUrl = res.tempFilePaths[0];
  24. that.uploadImg(type, imgUrl)
  25. }
  26. })
  27. },
  28. // 上傳圖片到云存儲
  29. uploadImg(type, imgUrl) {
  30. let that = this
  31. wx.cloud.uploadFile({
  32. cloudPath: 'ocr/' + type + '.png',
  33. filePath: imgUrl, // 文件路徑
  34. success: res => {
  35. console.log("上傳成功", res.fileID)
  36. that.getImgUrl(type, res.fileID)
  37. },
  38. fail: err => {
  39. console.log("上傳失敗", err)
  40. }
  41. })
  42. },
  43. //獲取云存儲里的圖片url
  44. getImgUrl(type, imgUrl) {
  45. let that = this
  46. wx.cloud.getTempFileURL({
  47. fileList: [imgUrl],
  48. success: res => {
  49. let imgUrl = res.fileList[0].tempFileURL
  50. console.log("獲取圖片url成功", imgUrl)
  51. that.shibie(type, imgUrl)
  52. },
  53. fail: err => {
  54. console.log("獲取圖片url失敗", err)
  55. }
  56. })
  57. },
  58. //調用云函數,實現OCR識別
  59. shibie(type, imgUrl) {
  60. wx.cloud.callFunction({
  61. name: "ocr",
  62. data: {
  63. type: type,
  64. imgUrl: imgUrl
  65. },
  66. success(res) {
  67. console.log("識別成功", res)
  68. },
  69. fail(res) {
  70. console.log("識別失敗", res)
  71. }
  72. })
  73. }
  74. })

上面代碼注釋講解的很清楚了,再結合我們的流程圖,相信你可以看明白。

三,重頭戲來了,識別的核心代碼是下面這個云函數

云函數的完整代碼也給大家貼出來

  1. // 云函數入口文件
  2. const cloud = require('wx-server-sdk')
  3. cloud.init()
  4. // 云函數入口函數
  5. exports.main = async(event, context) => {
  6. let {
  7. type,
  8. imgUrl
  9. } = event
  10. switch (type) {
  11. case 'shenfenzheng':
  12. {
  13. // 識別身份證
  14. return shenfenzheng(imgUrl)
  15. }
  16. case 'yinhangka':
  17. {
  18. // 識別銀行卡
  19. return yinhangka(imgUrl)
  20. }
  21. case 'xingshizheng':
  22. {
  23. // 識別行駛證
  24. return xingshizheng(imgUrl)
  25. }
  26. default:
  27. {
  28. return
  29. }
  30. }
  31. }
  32. //識別身份證
  33. async function shenfenzheng(imgUrl) {
  34. try {
  35. const result = await cloud.openapi.ocr.idcard({
  36. type: 'photo',
  37. imgUrl: imgUrl
  38. })
  39. return result
  40. } catch (err) {
  41. console.log(err)
  42. return err
  43. }
  44. }
  45. //識別銀行卡
  46. async function yinhangka(imgUrl) {
  47. try {
  48. const result = await cloud.openapi.ocr.bankcard({
  49. type: 'photo',
  50. imgUrl: imgUrl
  51. })
  52. return result
  53. } catch (err) {
  54. console.log(err)
  55. return err
  56. }
  57. }
  58. //識別行駛證
  59. async function xingshizheng(imgUrl) {
  60. try {
  61. const result = await cloud.openapi.ocr.vehicleLicense({
  62. type: 'photo',
  63. imgUrl: imgUrl
  64. })
  65. return result
  66. } catch (err) {
  67. console.log(err)
  68. return err
  69. }
  70. }

其實沒什么特別的,就是用一個switch方法,根據用戶傳入的不同的type值,來實現不同的識別效果。 
如用傳入的type是‘ yinhangka’,我們就調用銀行卡識別

  1. try {
  2. const result = await cloud.openapi.ocr.bankcard({
  3. type: 'photo',
  4. imgUrl: imgUrl
  5. })
  6. return result
  7. } catch (err) {
  8. console.log(err)
  9. return err
  10. }

進而把識別的結果返回給小程序端,如下圖

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

源碼其實在上面都已經貼給大家了,如果你覺得不完整,想要完整的源碼可以在文章底部留言或者私信我。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 編程小石頭 來自: 簡書
必中分分彩在线计划 股票的交易规则 北京pk105码倍投方案 德甲历届冠军 新角色麻将来了下载 极速赛车软件开奖 北京赛车开奖直播 快3豹子通选中奖 淘宝天天红包赛登陆不了了 自由精神 通化大嘴棋牌麻将下 ag捕鱼王官方下载 不收费的游戏麻将 微乐河南麻将下载安装苹果 世界杯比分表论坛 叶小姐西安按摩v 买股票开户