微信小程序> 微信小程序识别身份证，银行卡，营业执照，驾照

微信小程序识别身份证，银行卡，营业执照，驾照

浏览量：10933 时间： 来源：微信小程序


微信小程序ocr识别如何实现微信小程序识别身份证，银行卡，驾照，营业执照，图片文字等功能。今天分享一下详细的实现流程。

第一次看到这个流程图，可能有点萌，什么云开发，云函数。。。。 
不要着急，我们接下来会一步步带大家实现。

先看下我们的页面和效果图。

功能其实很简单，就是我们点对应的按钮后，去拍照或者去相册选择对应的图片。然后把图片上传到云存储，会有一个对应的图片url，然后把这个图片url传递到云函数，然后云函数里使用小程序的开发ocr能力，来识别图片，返回对应的信息回来。如下图所示，我们识别银行卡（身份证什么的就不演示了，涉及到石头哥个人隐私）

接下来就是代码的实现了。

一，首先要创建一个云开发的小程序项目

这里我前面文章有讲解过，就不再细说了，不会的同学去翻看下我之前的文章。或者看下我录制的 讲解视频 
这里有一点需要注意的给大家说下

二，创建一个简单的小程序页面

1，index.wxml如下

2，index.js完整代码如下 

																										
    																								
  1. 													Page({ 												
    2. 												
  2. 																									
    3. 												
  3. 													 //身份证 												
    4. 												
  4. 													 shenfenzheng() { 												
    5. 												
  5. 													 this.photo("shenfenzheng") 												
    6. 												
  6. 													 }, 												
    7. 												
  7. 													 //银行卡 												
    8. 												
  8. 													 yinhangka() { 												
    9. 												
  9. 													 this.photo("yinhangka") 												
    10. 												
  10. 													 }, 												
    11. 												
  11. 													 //行驶证 												
    12. 												
  12. 													 xingshizheng() { 												
    13. 												
  13. 													 this.photo("xingshizheng") 												
    14. 												
  14. 													 }, 												
    15. 												
  15. 																									
    16. 												
  16. 													 //拍照或者从相册选择要识别的照片 												
    17. 												
  17. 													 photo(type) { 												
    18. 												
  18. 													 let that = this 												
    19. 												
  19. 													 wx.chooseImage({ 												
    20. 												
  20. 													 count: 1, 												
    21. 												
  21. 													 sizeType: ['original', 'compressed'], 												
    22. 												
  22. 													 sourceType: ['album', 'camera'], 												
    23. 												
  23. 													 success(res) { 												
    24. 												
  24. 													 // tempFilePath可以作为img标签的src属性显示图片 												
    25. 												
  25. 													 let imgUrl = res.tempFilePaths[0]; 												
    26. 												
  26. 													 that.uploadImg(type, imgUrl) 												
    27. 												
  27. 													 } 												
    28. 												
  28. 													 }) 												
    29. 												
  29. 													 }, 												
    30. 												
  30. 																									
    31. 												
  31. 													 // 上传图片到云存储 												
    32. 												
  32. 													 uploadImg(type, imgUrl) { 												
    33. 												
  33. 													 let that = this 												
    34. 												
  34. 													 wx.cloud.uploadFile({ 												
    35. 												
  35. 													 cloudPath: 'ocr/' + type + '.png', 												
    36. 												
  36. 													 filePath: imgUrl, // 文件路径 												
    37. 												
  37. 													 success: res => { 												
    38. 												
  38. 													 console.log("上传成功", res.fileID) 												
    39. 												
  39. 													 that.getImgUrl(type, res.fileID) 												
    40. 												
  40. 													 }, 												
    41. 												
  41. 													 fail: err => { 												
    42. 												
  42. 													 console.log("上传失败", err) 												
    43. 												
  43. 													 } 												
    44. 												
  44. 													 }) 												
    45. 												
  45. 													 }, 												
    46. 												
  46. 																									
    47. 												
  47. 													 //获取云存储里的图片url 												
    48. 												
  48. 													 getImgUrl(type, imgUrl) { 												
    49. 												
  49. 													 let that = this 												
    50. 												
  50. 													 wx.cloud.getTempFileURL({ 												
    51. 												
  51. 													 fileList: [imgUrl], 												
    52. 												
  52. 													 success: res => { 												
    53. 												
  53. 													 let imgUrl = res.fileList[0].tempFileURL 												
    54. 												
  54. 													 console.log("获取图片url成功", imgUrl) 												
    55. 												
  55. 													 that.shibie(type, imgUrl) 												
    56. 												
  56. 													 }, 												
    57. 												
  57. 													 fail: err => { 												
    58. 												
  58. 													 console.log("获取图片url失败", err) 												
    59. 												
  59. 													 } 												
    60. 												
  60. 													 }) 												
    61. 												
  61. 													 }, 												
    62. 												
  62. 																									
    63. 												
  63. 													 //调用云函数，实现OCR识别 												
    64. 												
  64. 													 shibie(type, imgUrl) { 												
    65. 												
  65. 													 wx.cloud.callFunction({ 												
    66. 												
  66. 													 name: "ocr", 												
    67. 												
  67. 													 data: { 												
    68. 												
  68. 													 type: type, 												
    69. 												
  69. 													 imgUrl: imgUrl 												
    70. 												
  70. 													 }, 												
    71. 												
  71. 													 success(res) { 												
    72. 												
  72. 													 console.log("识别成功", res) 												
    73. 												
  73. 													 }, 												
    74. 												
  74. 													 fail(res) { 												
    75. 												
  75. 													 console.log("识别失败", res) 												
    76. 												
  76. 													 } 												
    77. 												
  77. 													 }) 												
    78. 												
  78. 													 } 												
    79. 												
  79. 													}) 												
    80.

上面代码注释讲解的很清楚了，再结合我们的流程图，相信你可以看明白。

三，重头戏来了，识别的核心代码是下面这个云函数

云函数的完整代码也给大家贴出来 

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

其实没什么特别的，就是用一个switch方法，根据用户传入的不同的type值，来实现不同的识别效果。 
如用传入的type是‘ yinhangka’，我们就调用银行卡识别 

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

进而把识别的结果返回给小程序端，如下图

到这里我们就完整的实现了，小程序识别身份证，银行卡，行驶证的功能。至于别的更多的ocr识别，可以去看小程序官方文档，结合着我的这篇文章，相信你也可以轻松实现更多的图片识别。

源码其实在上面都已经贴给大家了，如果你觉得不完整，想要完整的源码可以在文章底部留言或者私信我。

点击这里免费试用，快速创建您的专属小程序
标签： 微信小程序 小程序 小程序是什么

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

相关资讯

招商热线

17304402882

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎

深圳市咫尺网络科技开发有限公司©2015 咫尺网络 粤ICP备14097199号 工商网监电子标识