VUE整合信通身份证阅读器返回读取到的数据或将身份证图片返回

需求：身份证阅读器在浏览器上接入读取身份证信息
JAVA后端身份证图片合成https://blog.csdn.net/Ajie246862/article/details/125259692

1. 身份证阅读器

出于成本问题，我们接入的山东信通身份证阅读器。
电脑接入USB

2. 读取插件

信通一般会发送公安部身份证读取插件

3. VUE端组件

<template><div><el-button type="success" :loading="loading" @click="readCert">身份证阅读器</el-button><object id="CertCtl" type="application/cert-reader" width="0" height="0"><p style="color:#FF0000;">读卡器不可用</p></object></div>
</template><script>
export default {name: 'IdcardReader',data() {return {loading: false,}},methods: {/** 身份证阅读器读取数据 */readCert() {this.loading = true;const CertCtl = document.getElementById("CertCtl");try {let connect = JSON.parse(CertCtl.connect());if (connect.isCloud != 1) {this.loading = false;return this.$emit('data', { flag: false, msg: connect.errorMsg });}let status = JSON.parse(CertCtl.getStatus());if (connect.isCloud != 1) {this.loading = false;return this.$emit('data', { flag: false, msg: connect.errorMsg });}let result = JSON.parse(CertCtl.readCert());if (connect.isCloud != 1) {this.loading = false;return this.$emit('data', { flag: false, msg: connect.errorMsg });}let res = result.resultContent;this.$confirm('是否获取身份证正反面样例图片?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 头像编码转文件对象const file = this.convertAvatar(`data:image/gif;base64,${res.identityPic}`, 'avatar.png');let formData = new FormData();formData.append('file', file);// 上传身份证信息、获取身份证正反面图片idcardPic(formData, this.convertAvatarForm(res)).then((response) => {this.loading = false;// 将最终数据返回到需要页面return this.$emit('data', { flag: true, info: this.convertForm(res, response.data, true) });}).catch(() => {this.loading = false;});}).catch(() => {this.loading = false;return this.$emit('data', { flag: true, info: this.convertForm(res, null, false) });});// 断开设备CertCtl.disconnect()} catch(e) {this.loading = false;this.$notify({title: '警告',message: `控件不可用，可能未正确安装控件及驱动，或者控件未启用(浏览器版本要求：谷歌(4.2以下);火狐(5.6以下)。`,type: 'warning'});}},/** 头像base64转文件对象 */convertAvatar(url, filename) {let arr = url.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while(n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});},/** 返回数据对象 */convertForm(data, urls, flag) {if (data) {if (flag) {return {idcardFront: urls.face, // 身份证正面idcardBack: urls.back, // 身份证反面idcard: data.certNumber, // 身份证号name: data.partyName, // 姓名sex: data.gender == 1 ? '0' : '1',nation: data.nation, // 民族address: data.certAddress, // 地址birthday: this.parseDate(data.bornDay), // 生日};} else {return {idcard: data.certNumber, // 身份证号name: data.partyName, // 姓名sex: data.gender == 1 ? '0' : '1',nation: data.nation, // 民族address: data.certAddress, // 地址birthday: this.parseDate(data.bornDay), // 生日};}}},/** 上传获取图片数据对象 */convertAvatarForm(data) {if (data) {let date = data.bornDay;let begin = data.effDate;let end = data.expDate;let sex = data.gender == 1 ? '男' : '女';let lssueTime = `${begin.substr(0, 4)}.${begin.substr(4, 2)}.${begin.substr(6, 2)}`;let invalidTime = `${end.substr(0, 4)}.${end.substr(4, 2)}.${end.substr(6, 2)}`;return `/idcard/pic?name=${data.partyName}&sex=${sex}&nation=${data.nation}&year=${date.substr(0, 4)}&month=${date.substr(4, 2)}&day=${date.substr(6, 2)}&address=${data.certAddress}&idcard=${data.certNumber}&lssueOffice=${data.certOrg}&lssueTime=${lssueTime}&invalidTime=${invalidTime}`;}}},
}
</script>

VUE整合信通身份证阅读器返回读取到的数据或将身份证图片返回相关推荐

delphi 二代身份证阅读器 SDT_ReadBaseMsg()读取到的照片数据进行处理问题
SDT_ReadBaseMsg(1001,@pucCHMsg,puiCHMsgLen,@pucPHMsg,puiPHMsgLen,1);//获取读卡数据 pucCHMsg 文字信息(unicode编 ...
精伦身份证阅读器php_精伦IDR210-1(免驱)身份证阅读器
产品概述精伦IDR210-1身份证读卡器是一款多功能 .免装驱动程序的射频卡读写器,可根据需求配置不同部件实现不同射频卡的读取和写入功能. 精伦IDR210-1配置了专用身份证安全控制模块(SAM) ...
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本设备设备名称:台式身份证阅读机产品型号:ID180 设备驱动和文档链接:https://pan.baidu.com/s/1nAYk ...
VUE实现华视身份证阅读器读取身份证信息
VUE实现华视身份证阅读器读取身份证信息话不多上直接上代码,写的不怎么规范多多包涵,我是在模态框实现的,在这里就只提供模态框代码. 最后附上华视身份证阅读器安装文件和浏览器插件链接: [https: ...
VUE实现华视身份证阅读器读取身份证信息(本文分两种情况，第一中是点击按钮读取信息，一种是自动读取信息)
本文是用了vue+element来实现华视身份证读卡器读取身份信息的,当然在开发之前要做好前提准备,就是厂家提供对应设备的api和安装对应的驱动.本文通过两种方法来实现读取信息,第一种是点击按钮读取信 ...
公安部身份证阅读器模块SAM通讯协议
公安部身份证阅读器模块SAM通讯协议图为:公安部身份证阅读器SAM模块照片图为:东信新一代小身份证SAM模块支持Windows.Android.Linux.ARM.单片机等各系统二次开发. 一. ...
华视100UC 身份证阅读器 Java
华视100UC 身份证阅读器 Java 哪位大佬有64位可用的dll文件,施舍给小弟吧,万分感谢功能环境个人想法(有不对的地方希望大佬指正) 对于dll文件的想法目录结构 1. pom.xml ...
JNA二次开发华视身份证阅读器
JNA二次开发华视身份证阅读器前言添加依赖 SDK资料编写代码遇到的问题(坑) 前言这两天了解了一下java调用dll动态库的方法,总的有三种:JNI.JNA.JNative,其中JNA调用 ...
华视身份证阅读器SDK使用手册
华视身份证阅读器SDK使用手册 V1.33 华视电子读写设备有限公司 2008年07月11日概述本手册是操作身份证阅读器动态库应用函数的定义格式.调用方法和返回值的说明.在使用前,请确认授权文件 ...

VUE整合信通身份证阅读器返回读取到的数据或将身份证图片返回

1. 身份证阅读器

2. 读取插件

3. VUE端组件

VUE整合信通身份证阅读器返回读取到的数据或将身份证图片返回相关推荐

最新文章

热门文章