用户
 找回密码
 立即注册

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空间
收藏
原作者: 编程小石头 来自: 简书