专栏首页小程序云开发入门小程序识别身份证,银行卡,营业执照,驾照
原创

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

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

先画一张流程图出来

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

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

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

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

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

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

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

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

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

  • 1,index.wxml如下
    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) } }) } })上面代码注释讲解的很清楚了,再结合我们的流程图,相信你可以看明白。
  • 2,index.js完整代码如下

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

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

// 云函数入口文件
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识别,可以去看小程序官方文档,结合着我的这篇文章,相信你也可以轻松实现更多的图片识别。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序导出数据到excel表,借助云开发后台实现excel数据的保存

    关于云函数的创建,我这里不多说了。如果你连云函数的创建都不知道,建议你去小程序云开发官方文档去看看。或者看下我录制的云开发入门的视频:https://edu.c...

    编程小石头
  • 借助云开发5行代码获取小程序用户的手机号

    甚至可以说核心代码只有上图红色框里的两行。是的,你没听错,只靠这2行代码,就可以轻松的获取用户小程序绑定的手机号。

    编程小石头
  • 点餐系统的部署,Java点餐系统部署到腾讯云Linux服务器

    进入home目里后,可以看到我们之前传的qcl443.jar和脚本文件,然后执行 ./run.sh

    编程小石头
  • Python实现自己的AOP

    Java中的AOP可以用JDK的动态代理和cglib来实现,将需要拦截的方法前后可以额外添加些功能。

    用户2398817
  • oracle特殊符号去除问题

    最近在搞Oracle相关的工作,发现在Oracle中可以储存特殊符号的,但是把数据放到其他的数据库里面就不可以了,例如PG中,为了解决脏数据的问题,作者可是费了...

    小徐
  • 谷歌大脑深度学习从入门到精通视频课程[6.6]:自编码器——去噪自编码器

    AI100 已经引入 Hugo Larochelle 教授的深度学习课程,会在公众号中推送,并且对视频中的 PPT 进行讲解。课后,我们会设计一系列的问题来巩...

    AI科技大本营
  • 深度学习算法优化系列十六 | OpenVINO Post-Training Optimization文档翻译

    这个工具的主要功能是一个统一的量化工具。通常,此方法支持任意Bit(>=2)来表示权重和激活值。在量化过程中,会根据预先定义的硬件目标将FakeQuantize...

    BBuf
  • golang使用protobuf

    为什么要使用protobuf 最近的项目中,一直使用Json做数据传输。Json用起来的确很方便。但相对于protobuf数据量更大些。做一个移动端应用,为用户...

    李海彬
  • html标签详解

    <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML ...

    人生不如戏
  • 本周最新 10 款小程序,每一个都是精品 | 晓榜 #15

    精神饱满的一天,从一顿丰盛的早餐开始,让「开动早餐」小程序帮你养成吃早餐的好习惯吧。

    知晓君

扫码关注云+社区

领取腾讯云代金券