捷宇高拍仪-vue

捷宇高拍仪-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>
        <OBJECT
          classid="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.webSocketOnOpen
        this.webSocket.onerror = this.webSocketOnError
        this.webSocket.onmessage = this.webSocketOnMessage
        this.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){
      // 解析本地图片成base64
      var 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>

我后端代码调用的是百度识别图片的接口，所有我前段先把图片文件保存到本地路径，在使用高拍仪调用本地图片转Base64的接口，把图片处理成Base64的形式传给后端来识别。

控件及接口文档
链接: https://pan.baidu.com/s/1nYehoY1SPunMzGUMdf2bfg
提取码: Q1w2