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


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 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
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连接数据库代码应用分析
2011/05/29 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
详解python的几种标准输出重定向方式
2016/08/15 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
美国智能家居专家:tink
2019/06/04 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
介绍一下游标
2012/01/10 面试题
办理退休介绍信
2014/01/09 职场文书
班组长竞聘书
2014/03/31 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js