微信小程序接入百度OCR(身份证识别)

微信小程序接入百度OCR(身份证识别)

1.接口描述

支持对二代居民身份证正反面所有8个字段进行结构化识别,包括姓名、性别、民族、出生日期、住址、身份证号、签发机关、有效期限,识别准确率超过99%;同时支持身份证正面头像检测,并返回头像切片的base64编码及位置信息。

同时,支持用户上传的身份证图片进行图像风险和质量检测,可识别图片是否为复印件或临时身份证,是否被翻拍或编辑,是否存在正反颠倒、模糊、欠曝、过曝等质量问题。

请求示例

HTTP 方法POST

请求URL: https://aip.baidubce.com/rest/2.0/ocr/v1/idcard

URL参数:

参数
access_token 通过API Key和Secret Key获取的access_token,参考“Access Token获取

Header如下:

参数
Content-Type application/x-www-form-urlencoded

Body中放置请求参数,参数详情如下:

请求参数

参数 是否必选 类型 可选值范围 说明
image string - 图像数据,base64编码后进行urlencode,要求base64编码和urlencode后大小不超过4M,最短边至少15px,最长边最大4096px,支持jpg/jpeg/png/bmp格式
id_card_side string front/back front:身份证含照片的一面;back:身份证带国徽的一面
detect_direction string true/false 是否检测图像旋转角度,默认检测,即:true。朝向是指输入图像是正常方向、逆时针旋转90/180/270度。可选值包括: - true:检测旋转角度; - false:不检测旋转角度。
detect_risk string true/false 是否开启身份证风险类型(身份证复印件、临时身份证、身份证翻拍、修改过的身份证)功能,默认不开启,即:false。可选值:true-开启;false-不开启
detect_photo string true/false 是否检测头像内容,默认不检测。可选值:true-检测头像并返回头像的 base64 编码及位置信息
detect_rectify string true/false 是否进行完整性校验,默认为true,需上传各字段内容完善的图片方可识别;如果设置为false,则对于身份证切片(如仅身份证号区域)也可识别

2.小程序调用

需要参数access_token,存放在云数据库中,并定时刷新,不明白如何获取并定时刷新的参考文章:

[小程序开发技巧总结(三)-- 云开发时效数据刷新和存储 (access_token等)]

tips:核心部分是在本地完成base64 编码

2.1 自定义文件 profunc.js,实现函数并封装

function OcrIdCard(access_token){
  return new Promise(function(resolve,reject){
    var that = this;
    //识别身份证
    wx.chooseImage({
      count: 1,sizeType: ['compressed'],sourceType: ['album','camera'],success: function (res) {
        console.log(res.tempFilePaths)
          //核心代码
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],encoding: 'base64',//编码格式
          success(ans) {
            // console.log(ans.data)
            wx.showLoading({ title: '识别中' })
            wx.request({
              url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + access_token,method: 'POST',header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },data: {
                image: ans.data,id_card_side: 'front'
              },success(_res) {
                wx.hideLoading();
                resolve(_res)
                
              },fail(_res) {
                wx.hideLoading();
                wx.showToast({
                  title: '请求出错',})
                reject(_res)
              }
            })
          }
        })
      }
    })
  })
}

module.exports = {
  OcrIdCard: OcrIdCard
}

2.2 在小程序页面引用,需要传入access_token

const cwx = require('profunc.js'); //在小程序页面引入该js 文件
...
ocridcard(){
      var that = this;
      cwx.OcrIdCard(that.data.access_token).then(function(_res){
        var trdata = _res.data.words_result;
        console.log(trdata)
        that.setData({
          name: trdata['姓名'].words,idcard: trdata['公民身份号码'].words,userloc: trdata['住址'].words
        })
    })      
}

3.效果展示

接口返回数据如下

小程序 Android Web 等开发欢迎联系 QQ 1025584691

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...