ocr中身份证识别回填表单

最新推荐文章于 2024-05-02 13:44:23 发布

循环?day——No

最新推荐文章于 2024-05-02 13:44:23 发布

阅读量181

点赞数 1

文章标签： ocr javascript 前端 html5 css 前端框架 ajax

本文链接：https://blog.csdn.net/2301_76634106/article/details/132082911

版权

一.查看官网中身份证识别的技术文档

https://ai.baidu.com/ai-doc/OCR/rk3h7xzckhttps://ai.baidu.com/ai-doc/OCR/rk3h7xzck

二.申请client_id和client_secret的编号，以便下面的使用

1.打开ocr官方文档，登录进入，在页面中选择文档以及文档里面的文字识别

2.创建应用，即可得到client_id和client_secret

填写完点击“立即创建”即可获得

3.查看创建完的应用，其中可以更改client_id和client_secret

更改操作：点击“操作”的“管理”，在弹出的页面中点击“更新Secret Key”即可

4.领取免费使用ocr识别

三.代码的实现

效果图：

1.html

	<view class="realName">
		<view class="realNameTop">
			<view class="realNameTopBox">
				<view class="realNameTopTitle">
					姓名
				</view>
				<view class="realNameTopContent">
					<u-input v-model="name" type="text" placeholder="请扫描录入姓名" :placeholder-style="placeholderStyle" />
				</view>
			</view>
			<view class="realNameTopBox">
				<view class="realNameTopTitle">
					身份证号码
				</view>
				<view class="realNameTopContent">
					<u-input v-model="idCard" type="text" placeholder="请扫描录入身份证号" :placeholder-style="placeholderStyle" />
				</view>
			</view>
			<view class="realNameTopBox">
				<view class="realNameTopTitle">
					身份证地址
				</view>
				<view class="realNameTopContent">
					<u-input v-model="idAddress" type="text" placeholder="请扫描录入身份证地址" :placeholder-style="placeholderStyle" />
				</view>
			</view>
			<view class="realNameTopBox">
				<view class="realNameTopTitle">
					行政区域
				</view>
				<view class="realNameTopContent">
					<!-- <uni-section> -->
					<uni-data-picker placeholder="请选择所在行政区域" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</view>
			</view>
		</view>
		<view class="realNameBottom">
			<view class="realIdFront" @click="frontClick()">
				<!-- <img class="realIdImg" :src="imgbaseUrl + src1" alt=""> -->
				<img class="realIdImg" :src="src1" alt="">
			</view>
			<view class="realIdFront" style="margin-top: 10px;" @click="oppositeClick()">
				<img class="realIdImg" :src="src2" alt="">
			</view>
			<view class="realIdBtn" @click="uploadClick()">
				下一步
			</view>
		</view>
	</view>
</template>

2.script

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				name: '',
				idCard: '',
				idAddress: '',
				value: '',
				zmsrc: '',
				fmsrc: '',
				placeholderStyle: "color:#7d7d7d;font-size:12px",
				show: false,
				classes: '1-3',
				dataTree: [],

				// ocr
				dataObj: {
					client_id: '此处需自己申请',
					client_secret: '此处需自己申请',
				},
				baseImageList: '',
				baseImageList1: '',
				src1: require("static/index/身份证正面.png"),
				src2: require("static/index/身份证反面.png"),
				imgbaseUrl: '此处为上传图片的接口',
			}
		},
		props: {
			dataType: {
				type: String,
				default: 'idcard',
			}
		},
		onLoad() {
			this.getSumuInfo()
			this.getGachaInfo()
		},
		methods: {
			onnodeclick(e) {
				console.log(e, '1');
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
				console.log(e.detail.value, '666');
			},
			// 跳转到上传手持身份证和签字照片页
			uploadClick() {
				uni.navigateTo({
					url: `/pages/index/uploadIdAndText?name=${this.name}&idCard=${this.idCard}&idAddress=${this.idAddress}&value=${this.value}&zmsrc=${this.zmsrc}&fmsrc=${this.fmsrc}`
				})
			},
			// 身份证正面照片
			frontClick() {
				if (this.src1 == require("static/index/身份证正面.png")) {
					let self = this
					uni.chooseImage({
						count: 1,
						success: (ress) => {
							uni.showLoading({
								title: '正在识别中...'
							})
							console.log(ress.tempFiles[0].name, '上传的图片');
							uni.uploadFile({
								url: this.imgbaseUrl + "sys/common/upload",
								filePath: ress.tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test' // 上传附带参数
								},
								success: (uploadFileRes) => {
									// 根据接口具体返回格式   赋值具体对应url
									console.log(uploadFileRes.data, '555');
									var obj = JSON.parse(uploadFileRes.data)
									this.zmsrc = obj.message
								}
							})
							pathToBase64(ress.tempFilePaths[0])
								.then((res) => {
									console.log(res, 'zhe');
									self.baseImageList = self.baseImageList.concat(
										res); //成功后利用concat方法追加到baseImageList中
									console.log(self.baseImageList, '打印的base64图片');
									this.src1 = self.baseImageList
									console.log(ress, '11111');
									self.getAccessToken(res, ress)
									// uni.$emit("src1", this.src1)
								})
								.catch(error => {
									console.error(error)
								})
						},
						fail(err) {
							uni.hideLoading()
							console.log(err)
						}
					});
				}
			},
			// 身份证反面照片
			oppositeClick() {
				if (this.src2 == require("static/index/身份证反面.png")) {
					let self = this
					uni.chooseImage({
						count: 1,
						success: (ress) => {
							uni.showLoading({
								title: '正在识别中...'
							})
							uni.uploadFile({
								url: this.imgbaseUrl + "sys/common/upload",
								filePath: ress.tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test' // 上传附带参数
								},
								success: (uploadFileRes) => {
									// 根据接口具体返回格式   赋值具体对应url
									console.log(uploadFileRes.data, '555');
									var obj = JSON.parse(uploadFileRes.data)
									this.fmsrc = obj.message
								}
							})
							pathToBase64(ress.tempFilePaths[0])
								.then((res) => {
									self.baseImageList1 = self.baseImageList1.concat(
										res); //成功后利用concat方法追加到baseImageList中
									console.log(self.baseImageList1, '打印的base64图片');
									this.src2 = self.baseImageList1
									self.getAccessToken(res, ress)
									uni.$emit("src2", this.src2)
								})
								.catch(error => {
									console.error(error)
								})
						},
						fail(err) {
							uni.hideLoading()
							console.log(err)
						}
					});
				}
			},
			getAccessToken(path, ress) {
				let self = this
				uni.request({
					// url: '/baseUrlTest/oauth/2.0/token?grant_type=client_credentials&client_id=此处需自己申请&client_secret=此处需自己申请',
					// url: 'https://aip.baidubce.com/oauth/2.0/token',
					url: '/baseUrlTest/oauth/2.0/token',
					data: {
						grant_type: 'client_credentials',
						client_id: self.dataObj.client_id,
						client_secret: self.dataObj.client_secret
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						if (self.dataType == 'idcard') {
							self.uploadImage(path, res.data.access_token, ress)
						} else {
							self.uploadlicense(path, res.data.access_token, ress)
						}
						uni.hideLoading()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, '错误提示')
					}
				})
				console.log(self, '打印11');
			},
			// 身份证识别
			uploadImage(path, token, ress) {
				let self = this
				uni.request({
					url: '/baseUrlTest/rest/2.0/ocr/v1/idcard',
					data: {
						image: path,
						access_token: token,
						// front：身份证含照片的一面；back带国徽的一面
						id_card_side: 'back'
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res, '识别成功之后')
						uni.hideLoading()
						self.$emit('end', {
							path: ress,
							animal: false,
							words: res.data
						})
						console.log(res, '识别的信息');
						this.name = res.data.words_result.姓名.words
						this.idCard = res.data.words_result.公民身份号码.words
						this.idAddress = res.data.words_result.住址.words
					},
					fail(err) {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
		}
	}
</script>

3.style

<style scoped>
	.realNameTopBox {
		display: flex;
		align-items: center;
		padding: 5px 10px;
		background-color: #fff;
		color: #2c2c2c;
		border-bottom: 1px solid #ededed;
		font-size: 12px;
		width: 100%;
		/* border: 1px solid blue; */
	}

	.realNameTopTitle {
		width: 20%;
		/* border: 1px solid yellow; */
	}

	/deep/ uni-view.realNameTopContent {
		/* border: 1px solid red; */
		/* width: 280px !important; */
		margin-left: 5%;
		width: 75%;
	}

	.realNameBottom {
		background-color: #fff;
		padding: 10px 0;
	}

	.realIdFront {
		width: 95%;
		height: 200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #cdcdcd;
	}

	.realIdImg {
		width: 99%;
		height: 98%;
	}

	.realIdBtn {
		width: 95%;
		margin: 20px auto;
		background-color: #fccf36;
		line-height: 40px;
		text-align: center;
		color: #626262;
		border-radius: 3px;
		box-shadow: 0 2px 2px #cdcdcd;
	}
</style>