uniapp:使用百度API提取身份证信息（微信小程序适用）

首先，在百度申请apiKey和SecretKey，参考官网。

https://ai.baidu.com/ai-doc/OCR/dk3iqnq51

想要提取身份证信息，一共需要完成三个步骤：

1、使用apiKey和SecretKey，跟百度发起请求，获取access_token，每次申请的token有30天有效期，为了提高效率，我们只在页面加载的时候获取token，然后保存在本地，以备后面使用。

2、通过相册或者拍照来获取图片信息，并且保存为base64格式。

3、使用前面的token和base64，跟百度发起请求，识别图片内容，提取到身份证信息。

开发中遇到的问题：

1、相机问题

关于获取图片，开始我直接用的uni.chooseImage，但是这种做法不能加相框，界面粗陋，并且每次拍照都会在手机上留下照片，后来在网上搜到自定义相机，既可以加相框，而且不会在手机上留下照片，很完美。

2、识别速度问题

但是接踵而来的问题是，获取token和获取图片都很快，但是识别图片内容超级慢，开始以为是我的网络问题，提高了网速后，识别速度稍微提高了一点，但依旧觉得无法接受，最后在室友的建议下，尝试修改自定义相机的quality参数，网上抄来的代码，设置的是high，也就是说图片高清，信息量可能太大，导致识别速度慢，改成low，识别依旧很慢，最后设置为normal，识别速度终于可以接受了。

完整代码：

注意：

我使用了uni-icon，这个是扩展组件，这个需要另外引入，具体步骤见官网。

虽然一直会报promise undefined错误，但其实不影响使用。

<template><view class="container"><camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 500upx;"><cover-image src="../../static/scan-frame/front.png" class="scan-img"></cover-image></camera><view class="photo"><view class="album"><uni-icons type="image" color="#fff" size="30" @click="openAlbum"></uni-icons></view><view><uni-icons type="camera-filled" color="#fff" size="80" @click="takePhoto"></uni-icons></view></view></view>
</template><script>export default {data() {return {title: 'Hello',apiKey: 'OFZtAPc9X743qrIKZcCLEPGZ',SecretKey: 'X6UKLPcHZwpwIT92zkv6U2oLfR9xFu0k',}},onLoad() {// 每次加载页面的时候就获取tokenthis.getAccessToken();},methods: {//打开相册openAlbum() {uni.showLoading({title: '正在获取图片...'})let that = thisuni.chooseImage({count: 1, // 默认9  sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有  success: res => {uni.hideLoading()let tempFilePaths = res.tempFilePaths[0]// 图片转 base64uni.getFileSystemManager().readFile({filePath: tempFilePaths, //选择图片返回的相对路径  encoding: 'base64', //编码格式  success: v=> { //成功的回调  let base64String =  v.data that.getIdInfo(base64String)}  }) }})},// 点击拍照takePhoto() {uni.showLoading({title: '正在获取图片...'})let that = thisconst ctx = uni.createCameraContext()ctx.takePhoto({quality: 'normal',success: res => {uni.hideLoading()let base64String =`${wx.getFileSystemManager().readFileSync(res.tempImagePath, "base64")}`that.getIdInfo(base64String)}})},// access_token 有效期为 2592000 秒 / 30天，获取tokengetAccessToken() {uni.showLoading({title: '正在获取令牌...'})let that = thisuni.request({url: 'https://aip.baidubce.com/oauth/2.0/token',method: 'POST',data: {grant_type: 'client_credentials',client_id: that.apiKey, // 在百度智能云那边创建一个应用后可以获取client_secret: that.SecretKey // 在百度智能云那边创建一个应用后可以获取},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: res => {uni.hideLoading()uni.setStorageSync('accessToken', res.data.access_token)},fail(e) {uni.hideLoading()uni.showToast({title: '连接服务出错，请稍后再试!'})}});},getIdInfo(base64String) {let accessToken = uni.getStorageSync('accessToken')uni.showLoading({title: '正在解析...'})// 开始识别uni.request({url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + accessToken,method: 'POST',data: {image: base64String,id_card_side: 'front' // 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: res => {uni.hideLoading()console.log(res.data)uni.showToast({title: res.data.words_result.公民身份号码.words,duration: 20000});},fail(e) {uni.hideLoading()uni.showToast({title: '连接服务出错，请稍后再试!'})}});}}}
</script><style>.container {background-color: #aaa;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}.scan-img {width: 100%;height: 500upx;}.photo {position: absolute;bottom: 0;width: 100%;display: flex;justify-content: center;align-items: center;}/* 相册按钮使用绝对定位，保证相机按钮居中显示 */.album {position: absolute;left: 50px;}
</style>

效果：

相框背景图：

参考文章：

uniapp识别身份证_mwh_user的博客-CSDN博客_uniapp识别身份证

uniapp做微信小程序身份证识别功能(百度云身份证识别api)_Other world的博客-CSDN博客_uniapp微信小程序扫描识别身份证

uni-app之接入百度OCR识别身份证(微信小程序版本)_iamzhizhang的博客-CSDN博客

uniapp:使用百度API提取身份证信息（微信小程序适用）相关推荐

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案
主要是跟vue2相关的开发环境与框架. 本人选型方案结合自身知识系统(vue2,webstorm),综上相关框架了解,选择了以下方案: 开发环境:HBuilder X + Webstorm 框 ...
视频教程-uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...
uni-app云开发的网盘助手微信小程序源码抓取网盘资源引流好助手
uni-app云开发的网盘助手微信小程序源码抓取网盘资源引流好助手这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以 ...
uni-app云开发的网盘助手微信小程序源码
这是一款uni-app开发的一款网盘小助手小程序源码安装教程: 我们首先使用HBuilderx导入您的源码,然后点击manifest.json基础配置然后重新获取一下uni-app应用标识然后我们 ...
追书神器的api接口写的微信小程序
@这是我基于追书神器的api接口写的微信小程序这是我小程序的二维码
百度api识别身份证信息
集成微信小程序的时候需要用到自动识别身份证信息填充进去,所以看文档集成百度的卡证识别: 首先百度识别功能很强大: 有上述功能. 识别身份证需要识别的是身份证的图片,所以就要将图片拿到,在百度api的调 ...
uniapp判断当前运行环境 app h5 微信小程序百度小程序
hbuilderX最新版本现在已经支持在代码中获取当前所处环境仅3.4.10+版本以上才支持,如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11 ...
百度人工智能API的调用_微信小程序。
微信小程序–智能接口通过微信小程序开发调用百度人工智能接口,从而实现很多有趣的功能. 文章目录微信小程序--智能接口前言一.百度智能云的认识 1-1 注册 1-2 页面说明 1-3 功能初识 ...

uniapp:使用百度API提取身份证信息（微信小程序适用）

uniapp:使用百度API提取身份证信息（微信小程序适用）相关推荐

最新文章

热门文章