vue项目如何集成良田高拍仪（二次开发）

由于项目需要集成良田的高拍仪功能，所以按我们项目需要测试了一些功能，写了例子。

首先第一步，是去良田的官网去问售后一份demo例子
良田官方地址：https://www.eloam.cn/，
主要是因为每个机器的编码不同，需要问他们技术人员要二次开发文档，原本我们的高拍仪会赠送一个光盘，但是我们这边的暂时找不到了，所以有需要的可以找厂商支持。（最最重要的是，如果你的项目不是IE游览器的，一定要问他们要个跨游览器版本的控件）

要回来的文档就是这样子的，他们的文件是支持中文路径的，虽然感觉不怎么好。和安装后的文件

首先，这个高拍仪的东西，是一定要装个插件的，基本上安装包会让你把东西都装好，而且这个高拍仪跨游览器的东西是运行时一定要启动，如果你想知道你有没有装好，可以看bin文件下有个测试的软件

好，环境配置说完了，再说说集成到vue里面

这里面是有官方的例子的，你可以打开里面的html页面去观看，
记得记得一定要导入良田高拍仪的js方法，就是这个，html都是可以参考的

html的页面布局我就不详细说了，因为我的项目上集成了element 样式插件，参考就可以，主要是id

<template><section><img v-if="picBlob" :src="picBlob"/><el-container class="app-container-h col"><div class="content"><el-row><el-col :span="12" class="item_l" ><img :src="send_priImgData" id="bigPriDev"/>//这个是主摄像头<img :src="send_subImgData" id="bigSubDev"/>//这个是副摄像头</el-col><el-col :span="12" class="item_r">//这里是我的功能按钮<el-button @click="handlePhoto('photo')">人脸摄像头拍照</el-button><el-button @click="handlePhoto('photo2')">证件摄像头拍照</el-button><el-button @click="readIDCard">识别身份证</el-button><el-button @click="verifyFaceDetect">人证对比</el-button></el-input><div class="tip-font font-color">点击图片查看大图</div><div class=""><el-image :src="send_priPhotoData" :preview-src-list="allPhotosList" id="devPhoto"/>//这里是主摄像头拍摄的照片<el-image :src="send_subPhotoData" :preview-src-list="allPhotosList" id="devPhoto2"/>//这里是副摄像头拍摄的照片</div></el-col></el-row>   </div></el-container></section>
</template>

下面就是js文件呢

import { QWebChannel } from './qwebchannel.js'//记得记得一定要导入良田高拍仪的js方法
export default {data(){return{//这里是设置参数的，因为我的项目暂时不需要更改，所以设了默认值，有需要的可以自行更改baseUrl: '',socket: null,dialog: null,setScanSize: 'setScanSize_A4',priResolution: '1280 * 1024',subResolution: '1280 * 1024',priResolutionList: [],subResolutionList: [],send_priImgData: '',send_subImgData: '',send_priPhotoData: '',send_subPhotoData: '',allPhotosList:[],name:'',IDCard:'',imgPath:'',picBlob:undefined}},created(){},mounted(){this.baseUrl = 'ws://127.0.0.1:12345'//这个是默认的高拍仪插件地址，需要用到websocketthis.openSocket()},methods:{openVisible () {//初始化方法this.baseUrl = 'ws://127.0.0.1:12345'this.openSocket()},openSocket(baseUrl){//初始化处理方法let self = thislet socket = new WebSocket(this.baseUrl)socket.onclose = function () {console.error('web channel closed')}socket.onerror = function (error) {console.error('web channel error: ' + error)}socket.onopen = function () {new QWebChannel(socket, function (channel) {// 获取注册的对象self.dialog = channel.objects.dialog// 网页关闭函数window.onbeforeunload = function () {self.dialog.get_actionType('closeSignal')}window.onunload = function () {self.dialog.get_actionType('closeSignal')}// 设置图片尺寸self.dialog.get_actionType(self.setScanSize)// 服务器返回消息self.dialog.sendPrintInfo.connect(function (message) {//保存成功返回地址if (message.indexOf('savePhoto_success:') >= 0) {self.imgPath = message.substr(18)}//使用人证对比的成功if (message.indexOf('success! Similarity degree:') >= 0) {self.$message({message: '人证对比成功',type: 'success'});}if (message.indexOf('fail! Similarity degree:') >= 0) {self.$message({message: '人证对比失败',type: 'warning'});}// 主头获取到图片质量列表。（可能存在取不到的情况）if (message.indexOf('priResolution:') >= 0) {message = message.substr(9)self.priResolutionList.push({label: message,value: message})if (self.priResolutionList.length > 3) {self.priResolution = self.priResolutionList[1].value}}// 副头获取到图片质量列表。（可能存在取不到的情况）if (message.indexOf('subResolution:') >= 0) {message = message.substr(14)self.subResolutionList.push({label: message,value: message})if (self.subResolutionList.length > 3) {self.subResolution = self.subResolutionList[1].value}}//获取身份证功能if(message.indexOf("IDcardInfo:") >= 0){var index1 = message.indexOf(":")//获取：的下标//返回类型（IDcardInfo:人名 性别 民族 出生年 出生月 出生日 身份证地址 身份证号码 签发机关 有效期开始年 有效期开始月 有效期开始日 有效期结束年 有效期结束月 有效期结束日 ）var messageArr=[];var pos = message.indexOf(' ');while(pos>-1){messageArr.push(pos);pos= message.indexOf(' ',pos+1);}self.name = message.substring(index1,messageArr[0])self.IDCard = message.substring(messageArr[6],messageArr[7])}})// 接收图片流用来展示，多个，较小的base64，主头数据self.dialog.send_priImgData.connect(function (message) {self.send_priImgData = 'data:image/jpg;base64,' + message})//接收图片流用来展示，多个，较小的base64，副头数据self.dialog.send_subImgData.connect(function (message) {self.send_subImgData = 'data:image/jpg;base64,' + message})// 接收拍照base64，主头数据self.dialog.send_priPhotoData.connect(function (message) {self.send_priPhotoData = 'data:image/jpg;base64,' + message})//接收拍照base64，副头数据self.dialog.send_subPhotoData.connect(function (message) {self.send_subPhotoData = 'data:image/jpg;base64,' + message})// 网页加载完成信号// self.dialog.html_loaded('one')self.dialog.html_loaded('two')self.dialog.set_configValue('set_savePath:C:/eloamFile')// 主头检查图片质量列表能否获取到，假如没取到，就（反初始化，在初始化）if (self.priResolutionList.length == 0) {self.reloadSignal()}// 副头检查图片质量列表能否获取到，假如没取到，就（反初始化，在初始化）if (self.subResolutionList.length == 0) {self.reloadSignal()}})}},// 设置图片尺寸setScanSizeChange () {this.dialog.get_actionType(this.setScanSize)},// 重新初始化 为了获取图片质量reloadSignal () {this.dialog.get_actionType('closeSignal')setTimeout(() => {// this.dialog.html_loaded('one')//这是获取一个摄像头的，都是获取主摄像头this.dialog.html_loaded('two')//这是获取两个摄像头的，一个主摄像头，一个副摄像头})},// 主头切换图片质量priResolutionChange () {this.dialog.devChanged('primaryDev_:' + this.priResolution)},// 副头切换图片质量subResolutionChange () {this.dialog.devChanged('submaryDev_:' + this.subResolution)},//触发识别身份证readIDCard(){this.dialog.get_actionType("singleReadIDCard");},//人证对比功能verifyFaceDetect(){this.dialog.get_actionType("verifyFaceDetect");},handlePhoto (type) {switch (type) {case 'photo':this.dialog.photoBtnClicked('primaryDev_')this.dialog.get_actionType('savePhotoPriDev')breakcase 'photo2':this.dialog.photoBtnClicked('subDev_')this.dialog.get_actionType('savePhotoSubDev')breakcase 'left':this.dialog.get_actionType('rotateLeft')breakcase 'right':this.dialog.get_actionType('rotateRight')breakcase 'close':break}},//本地图片转流文件fileToUrl(dataURI) {var reader = new FileReader();reader.readAsDataURL(dataURI);//发起异步请求reader.onload = function(){//读取完成后，将结果赋值给img的srcreturn this.result;}},}
}
</script>

vue项目如何集成良田高拍仪（二次开发）相关推荐

c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
c++ 二次开发良田高拍仪_良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
c++ 二次开发良田高拍仪_六枝特良田LYV-850加工中心导轨配套防护罩日常维修
六枝特良田LYV-850加工中心导轨配套防护罩日常维修我厂生产的防护罩质量可与原厂的一样,同样的保障,质保期为一年,护罩安装不合适支持退换货. 尤其是元件连结的接合面刚度,对加工精度影响较大.通常,采 ...
高拍仪用法及部分问题处理
一.接入项目并使用 1.1 安装高拍仪驱动下载地址: https://www.eloam.cn/download/list/1 安装完成之后,打开驱动程序,即可看到接入的高拍仪的图像. 1.2 网页 ...
web端刷卡器_web工程集成身份证读卡器，高拍仪
接到个模块,要在已有的web工程里集成身份证读卡器,高拍仪等硬件.一时摸不着头脑,网上搜了下,发现都写的高端到看不懂.后来找了个已成功集成的web工程研究了下,发现弱爆了.这种硬件设备都已经做好了对w ...
泛微E9下紫光G750高拍仪集成总结
最近做了一个E9和紫光高拍仪集成的开发,经过探索,初见成效,做下记录,也希望能对大家有所帮助. 采用的方式为base64上传图片,将图片上传到服务器物理路径后,调用E9生成到知识模块中,并更新到流程表 ...
思源高拍仪万能驱动_动态展示和教学良田YL1050AF高拍仪评测
高拍仪的一大特点就是灵活多样,通过不同的工业设计用于文件扫描.视频展示.多媒体教学.信息采集.体温监测等等.良田最新款YL1050AF教学高拍仪通过巧妙的设计和专业的软件,为教学.培训.实时展示等应用 ...
项目开发高拍仪 base64 格式上传图片笔记
汉王高拍仪 base64 格式上传图片功能:base64 上传图片设备:汉王H650por 效果图如下实现代码下方接口代码页面 <html> <head> <ti ...

vue项目如何集成良田高拍仪（二次开发）

vue项目如何集成良田高拍仪（二次开发）相关推荐

最新文章

热门文章