小程序识别身份证,银行卡,营业执照,驾照的实现


Posted in Javascript onNovember 05, 2019

最近老是有同学问我小程序ocr识别的问题,就趁机研究了下,实现了小程序识别身份证,银行卡,驾照,营业执照,图片文字的功能。今天来给大家讲讲详细的实现流程。

先画一张流程图出来

小程序识别身份证,银行卡,营业执照,驾照的实现

第一次看到这个流程图,可能有点萌,什么云开发,云函数。。。。

不要着急,我们接下来会一步步带大家实现。

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

小程序识别身份证,银行卡,营业执照,驾照的实现

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

小程序识别身份证,银行卡,营业执照,驾照的实现

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

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

这里我前面文章有讲解过,就不再细说了,不会的同学去翻看下我之前的文章。或者看下我录制的讲解视频

这里有一点需要注意的给大家说下

小程序识别身份证,银行卡,营业执照,驾照的实现 

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

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)
   }
  })
 },

 //调用云函数,实现OCR识别
 shibie(type, imgUrl) {
  wx.cloud.callFunction({
   name: "ocr",
   data: {
    type: type,
    imgUrl: imgUrl
   },
   success(res) {
    console.log("识别成功", res)
   },
   fail(res) {
    console.log("识别失败", res)
   }
  })
 }
})

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

小程序识别身份证,银行卡,营业执照,驾照的实现 

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

小程序识别身份证,银行卡,营业执照,驾照的实现

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

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()

// 云函数入口函数
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值,来实现不同的识别效果。

如用传入的type是‘ yinhangka',我们就调用银行卡识别

try {
  const result = await cloud.openapi.ocr.bankcard({
   type: 'photo',
   imgUrl: imgUrl
  })
  return result
 } catch (err) {
  console.log(err)
  return err
 }

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

小程序识别身份证,银行卡,营业执照,驾照的实现

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

小程序识别身份证,银行卡,营业执照,驾照的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
node.js中express-session配置项详解
May 31 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
微信小程序实现上传图片功能
May 28 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
react 组件传值的三种方法
Jun 03 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
node.js域名解析实现方法详解
Nov 05 #Javascript
node.js文件操作系统实例详解
Nov 05 #Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 #Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 #Javascript
js实现随机点名程序
Sep 17 #Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 #Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
推荐php模板技术[转]
2007/01/04 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
小学生操行评语
2014/04/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
社区平安建设方案
2014/05/25 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python