前端使用身份证阅读器(高拍仪)集成vue项目

最近做后台管理项目的时候遇到一个问题就是使用高拍仪读取身份证信息（良田高拍仪）然后集成在页面上面当时一脸懵逼硬件交互怎么集成在浏览器呢于是问客服客服一堆废话连个js文件都没有就让去看文档估计是不懂技术然后自己慢慢的琢磨着然后下载他们的sdk以及其他的控件都可以正常使用了但是此时又出现一个问题就是浏览器不支持最后又找他们他们从新给发了最新的sdk安装包

里面包含了js文件算是都解决了高拍仪就不看了下面直接说该怎么实现具体的功能吧

此时我这边没有连接高拍仪而且还没有搞那么多复杂的东西所以页面功能比较简单

首先把js引入

1 把功能方法给封装起来

// 回调函数
var getMessage;
export function inits(getMessageArgs) {getMessage = getMessageArgs;let baseUrl = 'ws://127.0.0.1:12345';output("Connecting at " + baseUrl + ".");openSocket();window.output = output;setInterval(()=>{startIDCard()},1000)};function startIDCard() {dialog.get_actionType("startIDCard");}function output(message){var output = document.getElementById("output");output.innerHTML = output.innerHTML + message + "\n";output.scrollTop = output.scrollHeight;}function openSocket() {let IdCardList = []var socket = new WebSocket('ws://127.0.0.1:12345');socket.onclose = function(){console.error("web channel closed");};socket.onerror = function(error){console.error("web channel error: " + error);};socket.onopen = function(){ window.output("WebSocket start connect");new QWebChannel(socket, function(channel) {// make dialog object accessible globallywindow.dialog = channel.objects.dialog;//网页关闭函数window.onbeforeunload = function() {dialog.get_actionType("closeSignal");socket.close();}window.onunload = function() {dialog.get_actionType("closeSignal");socket.close();}//反初始化document.getElementById("closeHtml").onclick = function() {dialog.get_actionType("closeSignal");var element = document.getElementById("bigPriDev");element.src = "";};//初始化document.getElementById("openHtml").onclick = function() {dialog.html_loaded("one");};//设备列表点击document.getElementById("devList").onchange = function() {//清除展示信息var resolutionList = document.getElementById("resolutionList");resolutionList.options.length = 0;var modelList = document.getElementById("modelList");modelList.options.length = 0;var select = document.getElementById("devList");dialog.devChanged("primaryDev_:" + select.value);};//模式列表点击document.getElementById("modelList").onchange = function() {//清除展示信息var resolutionList = document.getElementById("resolutionList");resolutionList.options.length = 0;var select = document.getElementById("modelList");dialog.devChanged("primaryDev_:" + select.value);};//分辨率列表点击document.getElementById("resolutionList").onchange = function() {//清除展示信息var select = document.getElementById("resolutionList");dialog.devChanged("primaryDev_:" + select.value);};//打开视频document.getElementById("openPriVideo").onclick = function() {//清除展示信息var resolutionList = document.getElementById("resolutionList");resolutionList.options.length = 0;var modelList = document.getElementById("modelList");modelList.options.length = 0;var select = document.getElementById("devList");dialog.devChanged("primaryDev_:" + select.value);};//关闭视频document.getElementById("closePriVideo").onclick = function() {dialog.get_actionType("closePriVideo");var element = document.getElementById("bigPriDev");element.src = "";};//拍照按钮点击document.getElementById("photographPri").onclick = function() {dialog.photoBtnClicked("primaryDev_");dialog.get_actionType("savePhotoPriDev");};//左转document.getElementById("rotateLeft").onclick = function() {dialog.get_actionType("rotateLeft");};//右转document.getElementById("rotateRight").onclick = function() {dialog.get_actionType("rotateRight");};//属性设置document.getElementById("showProperty").onclick = function() {dialog.get_actionType("showProperty");};//纠偏裁边document.getElementById("setdeskew").onclick = function() {dialog.get_actionType("setdeskew");};//获取文件base64document.getElementById("getFileBase64").onclick = function() {dialog.get_functionTypes("getFileBase64","C:\\12345100.pdf" , "","");//dialog.get_functionTypes("getFileBase64","C:/1234.pdf" , "","");};//图片合成pdfdocument.getElementById("composePDF").onclick = function() {if(imgPathArray.length > 0){for (var i = 0; i < imgPathArray.length; i++){//发送合成pdf图片的路径，第2个参数：图片文件路径，第3，第4个参数为空var path = imgPathArray[i];if(path.indexOf("file:///") >= 0){path = path.substr(8);}dialog.get_functionTypes("sendPDFImgPath", path, "","");}//发送合成pdf命令//第2个参数：保存路径，如果该路径不存在则保存在.exe文件下的eloamFile文件夹//第3个参数：保存文件名称，如果为空则按照当前时间命名，//第4个参数为空dialog.get_functionTypes("composePDF", "C:" , "eloamFile\\1234", "");}};//删除本地文件document.getElementById("deleteFile").onclick = function() {//dialog.get_functionTypes("deleteFile", "C:\\Users\\Administrator\\Desktop\\eloamPhoto\\20180903-200102046.jpg", "", "");//dialog.get_functionTypes("deleteFile", "C:/Users/Administrator/Desktop/eloamPhoto/eeee.jpg", "", "");for (var i = 0; i < imgPathArray.length; i++){//删除文件，第2个参数：图片文件路径，第3，第4个参数为空var path = imgPathArray[i];if(path.indexOf("file:///") >= 0){path = path.substr(8);}dialog.get_functionTypes("deleteFile", path, "", "");}removeAll();//imgPathArray = [];};//图片保存参数document.getElementById("setImageProperty").onclick = function() {//第二个参数是图片dpi，正整数//第三个参数是图片保存质量：10表示最高质量，1表示较高质量，2表示中等质量,3表示较差质量，4表示差质量//如果参数为空则表示默认dialog.get_functionTypes("setImageProperty", "300" , "", "");};//服务器返回消息// dialog.sendPrintInfo.connect(function(message) {//   let IDcardInfo="IDcardInfo:";//   if(message.indexOf(IDcardInfo)>=0){//     IDcardInfo=message.substr(IDcardInfo.length)//     IdCardList = IDcardInfo.split(" ")//     console.log(IdCardList)//   }// });dialog.sendPrintInfo.connect(getMessage);//接收图片流用来展示，多个，较小的base64数据dialog.send_priImgData.connect(function(message) {var element = document.getElementById("bigPriDev");element.src = "data:image/jpg;base64," + message;});//接收拍照base64dialog.send_priPhotoData.connect(function(message) {var element = document.getElementById("devPhoto");element.src = "data:image/jpg;base64," + message;});window.output("ready to send/receive messages!");//网页加载完成信号dialog.html_loaded("one");});}}

需要什么就看看它那里面的3个demo 我这里面是简单的因为都是js 所以很多都是直接操作dom 所以不要随便该他们的id名

然后在页面里面直接调用

<template><div><div><img id="bigPriDev" width="640" height="480"  /></img><img id="devPhoto" width="360" height="270"  /></img><textarea style="width: 500px;height: 500px;" id="output"></textarea><br /><br /><input id="startIDCard" @click="startIDCard" type="button" value="启动二代证阅读" /><tr><input id="openHtml" type="button" value="初始化" /><input id="closeHtml" type="button" value="反初始化" /><br />设备列表：<select id="devList" style="width: 120px" ></select><select id="modelList" style="width: 120px" ></select><select id="resolutionList" style="width: 120px" ></select><input id="openPriVideo" type="button" value="打开主视频" /><input id="closePriVideo" type="button" value="关闭主视频"  /><input id="photographPri" type="button" value="拍照"  /><br /><input id="setdeskew" type="checkbox" value="" />纠偏裁边<input id="rotateLeft" type="button" value="左转" /><input id="rotateRight" type="button" value="右转" /><input id="showProperty" type="button" value="属性设置" /><input id="composePDF" type="button" value="合成PDF" /><input id="deleteFile" type="button" value="删除文件" /><input id="getFileBase64" type="button" value="获取文件base64" /><input id="setImageProperty" type="button" value="图片保存参数" /><br /><div id="container" style="float:left;"> </div></tr></div></div>
</template>
<script>
// import {inits} from "../../../utils/qwebchannel"export default {data() {return {baseUrl: 'ws://127.0.0.1:12345',IdCardList:[]}},mounted() {inits((message) => {let IDcardInfo = "IDcardInfo:";if(message.indexOf(IDcardInfo) >= 0){IDcardInfo=message.substr(IDcardInfo.length)this.IdCardList = IDcardInfo.split(" ")console.log(this.IdCardList)}})}}
</script><style scoped>@import "~@/styles/form.css";
</style>

可以看一下返回的数据

over

前端使用身份证阅读器(高拍仪)集成vue项目相关推荐

良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
c++ 二次开发良田高拍仪_良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
web端刷卡器_web工程集成身份证读卡器，高拍仪
接到个模块,要在已有的web工程里集成身份证读卡器,高拍仪等硬件.一时摸不着头脑,网上搜了下,发现都写的高端到看不懂.后来找了个已成功集成的web工程研究了下,发现弱爆了.这种硬件设备都已经做好了对w ...
泛微E9下紫光G750高拍仪集成总结
最近做了一个E9和紫光高拍仪集成的开发,经过探索,初见成效,做下记录,也希望能对大家有所帮助. 采用的方式为base64上传图片,将图片上传到服务器物理路径后,调用E9生成到知识模块中,并更新到流程表 ...
前端对接身份证阅读器/标签打印机/扫码枪记录
最近做的一个项目中前端对接了身份证读卡设备.标签打印设备.扫码枪,在此记录一下踩过的坑. 一.身份证读卡设备对接 1.设备厂商都会有接口库一般可以用C# C++来处理成一个类似桌面应用的东西,它会 ...
神思二代身份证阅读器集成WEB实例文档js及说明
神思二代身份证阅读器使用说明 --By wuhebin 20180705 1. 硬件说明:神思SS628(100)台式二代身份证阅读器 2. 神思阅读器仅支持IE浏览器或者兼容IE浏览 ...
维山VS073高拍仪技术规格说明书
一.产品介绍婚姻登记专用设备实现自动录入当事人个人生物特征信息(人脸.指纹) .信息采集:实现电子签名.文件档案电子化(高拍仪),实现婚姻登记高效精准服务. 二.技术参数技术参数 01 文 ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
公安部身份证阅读器模块SAM通讯协议
公安部身份证阅读器模块SAM通讯协议图为:公安部身份证阅读器SAM模块照片图为:东信新一代小身份证SAM模块支持Windows.Android.Linux.ARM.单片机等各系统二次开发. 一. ...

前端使用身份证阅读器(高拍仪)集成vue项目

前端使用身份证阅读器(高拍仪)集成vue项目相关推荐

最新文章

热门文章