uniapp识别身份证

最新推荐文章于 2025-04-06 12:41:37 发布
最新推荐文章于 2025-04-06 12:41:37 发布
阅读量4.6k 收藏 26
点赞数 4
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mwh_user/article/details/109387085
版权

通过调用百度api实现

每天500次免费次数
注意：需要先获取access_token
https://ai.baidu.com/ai-doc/OCR/rk3h7xzck百度那边的文档

uniapp的微信小程序端适用

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="" @click="getACSS_TOKEN" style="font-size: 36px;">
			gettoken
		</view>
		<view class="" @click="test">
			test
		</view>
		<image :src="base64str" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				apiKey: '',
				SecretKey: '',
				base64str: ''
			}
		},
		onLoad() {
			// 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key  和  Secret Key
			this.apiKey = uni.getStorageSync('apiKey')
			this.SecretKey = uni.getStorageSync('SecretKey')
		},
		methods: {
			test() {
				let that = this
				let access_token = uni.getStorageSync('access_token')
				
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        
						let tempFilePaths = res.tempFilePaths[0]
						// 图片转 base64
						uni.getFileSystemManager().readFile({
							filePath: tempFilePaths, //选择图片返回的相对路径  
							encoding: 'base64', //编码格式  
							success: v=> { //成功的回调  
								let base64 =  v.data // 返回的是没有 'data:image/jpeg;base64,'头的数据, 需要在页面显示图片可自行追加上  
								that.base64str = 'data:image/jpeg;base64,' + base64
								
								// 开始识别
								uni.request({
									url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + access_token,
									method: 'POST',
									data: {
										image: base64,
										id_card_side: 'back'// 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面
									},
									header: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									success: res => {
										console.log(res.data)
										console.log(res.data.words_result.签发机关.words)
										console.log(res.data.words_result.签发日期.words)
										console.log(res.data.words_result.失效日期.words)
									}
								});
							 }  
						}) 
						
						
				    }
				});
				
			},
			// access_token 有效期为 2592000 秒 / 30天
			getACSS_TOKEN() {
				let that = this
				uni.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token',
					method: 'POST',
					data: {
						grant_type: 'client_credentials',
						client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取
						client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data)
						uni.setStorageSync('access_token', res.data.access_token)
						// console.log(JSON.parse(res.data))
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

uniapp app端适用

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="" @click="getACSS_TOKEN" style="font-size: 36px;">
			gettoken
		</view>
		<view class="" @click="test">
			test
		</view>
		<image :src="base64str" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				apiKey: '',
				SecretKey: '',
				base64str: ''
			}
		},
		onLoad() {
			// 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key  和  Secret Key
			this.apiKey = uni.getStorageSync('apiKey')
			this.SecretKey = uni.getStorageSync('SecretKey')
		},
		methods: {
			test() {
				let that = this
				let access_token = uni.getStorageSync('access_token')
				
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        
						let tempFilePaths = res.tempFilePaths[0]
						// 图片转 base64
						plus.io.resolveLocalFileSystemURL(tempFilePaths, function(entry) {
							entry.file(function(file) {
								var fileReader = new plus.io.FileReader();
								fileReader.readAsDataURL(file);
								fileReader.onloadend = function(evt) {
									//console.log(evt.target.result);
									that.base64str = evt.target.result// 页面显示图片的src
									let base64 = evt.target.result.split(",")[1];// 传递给百度识别的 base64 格式的图片文件
									
									// 开始识别
									uni.request({
										url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + access_token,
										method: 'POST',
										data: {
											image: base64,
											id_card_side: 'back'// 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面
										},
										header: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										success: res => {
											console.log(res.data)
											console.log(res.data.words_result.签发机关.words)
											console.log(res.data.words_result.签发日期.words)
											console.log(res.data.words_result.失效日期.words)
										}
									});
								}
							})
						})
						
						
						
				    }
				});
				
			},
			// access_token 有效期为 2592000 秒 / 30天
			getACSS_TOKEN() {
				let that = this
				uni.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token',
					method: 'POST',
					data: {
						grant_type: 'client_credentials',
						client_id: this.apiKey,// 在百度智能云那边创建一个应用后可以获取
						client_secret: this.SecretKey// 在百度智能云那边创建一个应用后可以获取
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data)
						uni.setStorageSync('access_token', res.data.access_token)
						// console.log(JSON.parse(res.data))
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
Vue-Uni-App小程序实现身份证识别
qq_43485097的博客
12-24 7489
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
uniapp：身份证上传ocr识别
JackChan
04-22 1359
uniapp：身份证上传ocr识别
uniapp 前端实现文字识别，身份证识别，营业执照识别 （兼容APP、H5、小程序 不需要任何SDK）
热门推荐
2303_76218115的博客
06-24 1万+
本文将介绍如何使用uniapp和百度AI开放平台的OCR(光学字符识别)API实现身份证、营业执照等卡证的识别和文字识别功能。以上就是uniapp使用百度AI平台OCR API实现卡证识别和文字识别的整体实现过程全部内容了，有不懂的，或者我代码有误的地方，希望大家多多交流。具体详细代码示例可以私信问我要哈！
uniapp 键盘组件
最新发布
wofamaole的博客
04-06 294
数字键盘，为了应对uniapp的键盘样式无法自定义和无法对输出值进行拦截而封装，并且实现1. 有遮挡就上推，没遮挡就不上推；2. 精准上推。建议配合数字输入框一起使用。
uniapp中利用百度云OCR实现身份证识别功能
风如也的博客
05-13 951
搜索产品（例如文字识别）-> 立即使用 -> 免费领取 -> 创建应用 （跟着步骤走就好了）创建成功后，应用列表，如下图进入管理页面。
uni-app——小程序实现本地图片的上传以及身份证的智能识别
Bonsoir777的博客
12-29 5971
本文主要讲解uni-app中如何实现本地图片上传的方法
uni-app使用微信的ocr识别身份证
m0_73447002的博客
04-19 500
【代码】uni-app使用微信的ocr识别身份证。
uniapp 前端实现文字识别，身份证识别，营业执照识别 （兼容APP、H5、小程序 不需要任何SDK
2401_84616922的博客
05-16 501
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-JjzUPW2Q-1715796240242)][外链图片转存中…(img-wg0Qx2Ph-1715796240243)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
uniapp百度身份证识别
qq_42358798的博客
07-07 698
<text class="gui-grids-icon gui-icons" style="margin-left: 10rpx; font-size: 40rpx; font-weight: 600;" @tap.stop="getIDCard()">&#xe60b;</text> //百度身份证扫描 getApiToken() { let accessToken = uni.getStorageSync('BaiduAccessToken2'); return ne
uniapp调用百度智能云身份证识别
shuleijia的博客
01-20 1703
第一步：注册登录百度智能云平台https://login.bce.baidu.com/ 第二步：选择产品服务-人工智能-文字识别-创建应用 第三步：获取应用的API Key 和Secret Key 代码逻辑 新建js_sdk文件夹新建baidu_OCR.js // 获取token function token() { return new Promise((rs, rj) => { console.log('准备访问接口获取OCR识别token') try {
一个身份证校验的小程序
03-03
可以进行改良的身份证校验小程序。平时可以看看！
人脸核身uni-app插件-活体检测-人脸对比-人脸识别-人脸认证-证件 OCR 识别
11-11
我们封装了腾讯云慧眼人脸核身，提供各类认证功能模块，包含证件 OCR 识别、活体检测、人脸1:1对比等。微信/电话：185699405988
手机APP身份证识别
01-06
身份证识别软件SDK是基于移动平台的身份证识别应用程序，支持Android、iOS移动操作系统。该产品采用手机、平板电脑摄像头拍摄身份证图像，然后通过OCR软件对身份证信息进行识别提取。 以前，个人在办理金融保险等均要求实名认证，所以只得去相应的柜台的办理，但随着移动互联的快速发展，越来越多的互联网金融公司都推出了自己的金融APP，客户足不出户就可以在家办理，但是实名认证，绑定银行卡等等操作由于数字太多，往往用户体验不佳，而中安未来推出的手机扫一扫身份证识别软件直击用户痛点，大大提高了手机移动终端上输入身份证信息的速度和准确性，支持主流的Android、iOS平台，可以直接集成在APP上使用。
uniapp小程序ocr身份证识别
weixin_45563734的博客
02-14 734
uniapp小程序ocr身份证识别(含完整代码)
uniapp写微信小程序实现识别身份证照片功能
weixin_57031986的博客
11-22 1286
uniapp写微信小程序实现识别身份证照片功能
uni-app之接入百度OCR识别身份证(微信小程序版本)
iamzhizhang的博客
12-02 4501
本文为uni-app接入百度OCR识别身份证号，话不多说，直接上代码： 1. 第一步注册百度智能云账号，选择文字识别，创建应用，获取Api Key 与 Secret Key（下面要用到）： 2.第二步，查看百度OCR身份证识别技术文档，如下，共需调用2个接口： 第一接口：获取百度access_token， 上代码: getBDtoken() { uni.showLoading({ title: '正在连接服务...' }) return
uni-app 上传识别身份证信息
_我不是码农_
11-16 871
最近在做一款小程序，需要用到上传识别身份证的功能，但是本人对uni-app 不是特别熟悉，求大神帮忙！！！ 万分感谢！！！
简单记录记录一下uniapp实现上传身份证，并实现身份证识别功能
A1123352950的博客
11-09 2319
在这里简单记录一下uniapp实现身份证上传功能，简单的描述一下设计的原理，通过uni.chooseImage()获取文件地址，切换本地路径显示对应身份证图片，后通过将file文件转base64上传百度识别，后通过接口获取信息。具体逻辑还是比较简单的。使用百度的识别接口，需要先注册百度账号，获取对应的client_id和client_secret，通知还需要使用获取百度token的接口，在页面中调用一次，将获取到的token携带识别接口进行识别。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值