捷宇高拍仪

编程入门行业动态更新时间:2024-10-09 23:21:11

捷宇高拍仪

捷宇高拍仪-vue

框架vue-springboot

先去找捷宇售后要到他们的对接资料,会有他们的插件,不同的设备型号,插件会不一样,捷宇只适合windows系。插件安装后,去注册表搜索454C18E2-8B7D-43C6-8C17-B1825B49D7DE要能搜索到才行

我没有调用IE浏览器
我是在报captrue.bStopPlay is not a function的错误之后才实行的下面的方法

vue代码

<template><div><div  style="width: 1800px;background-color: #006843" ><p><OBJECTclassid="clsid:454C18E2-8B7D-43C6-8C17-B1825B49D7DE"id="captrue"/></p><p><img id="photo" src=""/></p><p><button @click="Start1_onclick">打开扫描仪</button><button @click="cszp">拍照</button><button @click="uploadImg">上传</button></p></div></div>
</template>

<script>
export default {name: "gpy",data() {return {myFileName: '',files: [],currDir: '',fName: 0,webSocket: null,imageBase64: '',}},mounted() {this.Init();//拍照事件(不确定有没有用)var gpyscript = document.createElement('script');window.phoneListener = this;gpyscript.type = 'text/javascript';gpyscript.setAttribute('for','captrue');gpyscript.setAttribute('language','javascript');gpyscript.event = 'BWSaveComplete(imagepath)';gpyscript.innerHTML='phoneListener.BWSaveComplete(imagepath)';document.body.appendChild(gpyscript);},methods: {//判断是什么浏览器(可加可不加)myBrowser: function () {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串console.log(userAgent);var isOpera = userAgent.indexOf("Opera") > -1;if (isOpera) {return "Opera";} //判断是否Opera浏览器else if (userAgent.indexOf("Firefox") > -1) {return "FF";} //判断是否Firefox浏览器else if (userAgent.indexOf("Edge") > -1) {return "Edge";} //判断是否Safari浏览器else if (userAgent.indexOf("Chrome") > -1) {return "Chrome";} else if (userAgent.indexOf("Safari") > -1) {return "Safari";} else {return "IE";} //判断是否IE浏览器},Init() {if (this.myBrowser() != "IE") {var div = document.getElementById("captrue");div.style.display = "none";var div = document.getElementById("photo");div.style.display = "block";// ip不用变，端口是高拍仪控件的端口也不要变this.webSocket = new WebSocket("ws://127.0.0.1:1818");//这是正常vue的写法this.webSocket.onopen = this.webSocketOnOpenthis.webSocket.onerror = this.webSocketOnErrorthis.webSocket.onmessage = this.webSocketOnMessagethis.webSocket.onclose = this.webSocketClose//下面是用function的方法/*this.webSocket.onerror = function (event) {alert("连接错误");};*//*this.webSocket.onopen = function (event) {// alert("open"+event.data);// console.log(event);};*//*this.webSocket.onclose = function (event) {alert("服务不存在或者被关闭");//onClose(event);};*//*this.webSocket.onmessage = function (event) {if (event.data.indexOf("BeginbStartPlay") >= 0) {}if (event.data.indexOf("BeginbSaveJPG") >= 0) {alert(event.data.replace("BeginbSaveJPG", "").replace("EndbSaveJPG", "").replace("true", "拍照成功").replace("false", "拍照失败"));}if (event.data.indexOf("BeginBase64Encode") >= 0) {console.log(event.data.replace("BeginBase64Encode", "").replace("EndBase64Encode", ""))let data = event.data.replace("BeginBase64Encode", "").replace("EndBase64Encode", "")this.copyBase64(data)// alert(//   event.data//     .replace("BeginBase64Encode", "")//     .replace("EndBase64Encode", "")// );}if (event.data.indexOf("BeginbUpLoadImage") >= 0) {alert(event.data.replace("BeginbUpLoadImage", "").replace("EndbUpLoadImage", ""));}if (event.data.indexOf("BeginbStopPlay") >= 0) {document.getElementById("photo").src = "";}else{document.getElementById("photo").src ="data:image/jpeg;base64," + event.data;}};*/} else {var div = document.getElementById("captrue");div.style.display = "block";var div = document.getElementById("photo");div.style.display = "none";}},webSocketOnError(){alert("连接错误");},webSocketOnOpen(){// alert("open"+event.data);// console.log(event);this.webSocket.send('OpenBarScanner')},webSocketClose(){// alert("服务不存在或者被关闭");},webSocketOnMessage(event){//渲染页面document.getElementById("photo").src ="data:image/jpeg;base64," + event.data;//看webSocket接收的什么数据if (event.data.indexOf("BeginbSaveJPG") >= 0) {// alert(//   event.data//     .replace("BeginbSaveJPG", "")//     .replace("EndbSaveJPG", "")//     .replace("true", "拍照成功")//     .replace("false", "拍照失败")// );if (event.data.replace("BeginbSaveJPG", "").replace("EndbSaveJPG", "") == 'true'){this.$message({showClose: true,message: '拍照成功',type: 'success'});}else {this.$message({showClose: true,message: '拍照失败',type: 'error'});}}if (event.data.indexOf("BeginBase64Encode") >= 0) {let data = event.data.replace("BeginBase64Encode", "").replace("EndBase64Encode", "")this.copyBase64(data)}},/** 打开扫描仪 --> 开始 */Start1_onclick(){// this.webSocket = new WebSocket("ws://127.0.0.1:1818");// this.webSocket.onopen = this.webSocketOnOpen// this.webSocket.onerror = this.webSocketOnError// this.webSocket.onmessage = this.webSocketOnMessage// this.webSocket.onclose = this.webSocketClose//停止this.webSocket.send("bStopPlay()");// 开始this.webSocket.send("bStartPlay()");// 放大摄像头this.webSocket.send("vZoomOut()");this.webSocket.send("vZoomOut()");this.webSocket.send("vZoomOut()");this.webSocket.send("vZoomOut()");this.webSocket.send("vZoomOut()");this.webSocket.send("vZoomOut()");// 设置分辨率this.webSocket.send("vSetResolution(7)");this.webSocket.send("vSetResolutionEx(9)");},/** 开始拍照 --> 拍照（原单张拍照） */cszp(){this.myFileName = ""var d = new Date().getTime();this.myFileName = d// 保存jpg图片到本地var newData = "bSaveJPG(d:\\gpy\\images\\," + d + ")"this.webSocket.send(newData)console.log(newData,123)},uploadImg(val){// 解析本地图片成base64var newData = "Base64Encode(d:\\gpy\\images\\" + this.myFileName + ".jpg)"this.webSocket.send(newData);// tellImageGpy({//   fileName: this.imageBase64// }).then(res => {//   console.log(res,12)// })// this.webSocket.close()},// 通过获取到的base64传给后端代码copyBase64: function(val){console.log(val,112233)tellImageGpy({fileName: val}).then(res => {console.log(res,12)})return;}}
}
</script>