vue3对接-捷宇SDK高拍仪

vue3对接捷宇的sdk高拍仪。

一般来说拿到捷宇对接资料,拿到控件,安装到需要的机器上

不同的设备型号,插件会不一样,

捷宇只适合windos系统。

对接资料大概这些

在对应的机器上 安装控件 (如果控件版本较老，则只支持IE浏览器)

控件无脑安装就行，控件安装完成后需要去注册表搜索 454C18E2-8B7D-43C6-8C17-B1825B49D7DE 能搜索到才行

之前售后发给我的版本就只支持ie浏览器，打开资料里面的demo文件疯狂报错(captrue.bStopPlay is not a function)/若是使用websocket就报错连接失败等等

图片这个控件版本就比较新，谷歌edg等都可以。重新安装后，点击demo就能看到高拍仪画面就行了。

废话不多说直接上代码！代码能跑咱就不用跑了！

Vue3代码

我这边简单封装了一个弹窗，具体sdk函数可以参考sdk开发指南

<template>
  <el-dialog v-model="state.dialogFormVisible" title="拍照" width="1400"
             :show-close="false" :close-on-click-modal="false" top="1vh">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h2 :id="titleId" :class="titleClass">拍照</h2>
      </div>
    </template>

    <div style="display: flex; justify-content: space-between">
      <div class="photo" @click="bigBtn(1)">放大</div>
      <div class="photo" @click="bigBtn(0)">缩小</div>
    </div>

    <p style="position: absolute; z-index: -99">
      <OBJECT classid="clsid:454C18E2-8B7D-43C6-8C17-B1825B49D7DE" id="captrue"/>
    </p>
    <p style="height: 70vh"><img id="photoImg" src="" style="height: 100%; width: 100%;"/></p>

    <template #footer>
      <div class="dialog-footer">
        <div style="display: flex; justify-content: space-between">
          <div class="photo" @click="close">取消</div>
          <div class="photo" @click="photoBtn">拍照</div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { img } from '@/components/photo/img.js'

const state = reactive({
  dialogFormVisible: false,
  webSocket: null,
  myFileName: '',
  imgList: []
})
const emit = defineEmits(["getImg"]);

const bigBtn = (type) => {
  if (type == 1) state.webSocket.send('vZoomOut()') // 放大
  else state.webSocket.send('vZoomIn()') // 缩小
}

// 打开弹框方法
const show = () => {
  state.dialogFormVisible = true
  Init()
}

// 关闭弹框方法
const close = () => {
  state.webSocket.close()
  state.webSocket = null
  state.myFileName = ''
  state.dialogFormVisible = false
}

// 拍照按钮
const photoBtn = () => {
  state.myFileName = ""
  let d = new Date().getTime();
  state.myFileName = d
  // 保存jpg图片到本地
  let newData = "bSaveJPG(d:\\gpy\\images\\," + d + ")"
  state.webSocket.send(newData)
}

const uploadImg = () => {
  // 解析本地图片成base64
  let newData = "Base64Encode(d:\\gpy\\images\\" + state.myFileName + ".jpg)"
  state.webSocket.send(newData);
}

const okBtn = (file) => {
  emit("getImg", file) // 将转换的file对象传给父组件
  close()
}

const base64ToFile = (base64String, fileName) => {
  let mime = 'image/jpeg';
  // 解码 base64 字符串
  let bstr = atob(base64String);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  // 创建 File 对象
  return new File([u8arr], fileName, { type: mime });
}

defineExpose({
  show,
  close
});

// 高拍仪相关 ----------------------------------------------------------------
// 初始化高拍仪
const Init = () => {
  // ip不用变，端口是高拍仪控件的端口也不要变
  state.webSocket = new WebSocket("ws://127.0.0.1:1818");
  state.webSocket.onopen = webSocketOnOpen
  state.webSocket.onerror = webSocketOnError
  state.webSocket.onmessage = webSocketOnMessage
  state.webSocket.onclose = webSocketClose
}
const webSocketOnError = () => {
  ElMessage.error("连接错误")
}
const webSocketOnOpen = () => {
  state.webSocket.send('OpenBarScanner')
}
const webSocketClose = () => {
  // alert("服务不存在或者被关闭");
}
const webSocketOnMessage = (event) => {
  //渲染页面
  document.getElementById("photoImg").src = "data:image/jpeg;base64," + event.data;
  // 拍照
  if (event.data.indexOf("BeginbSaveJPG") >= 0) {
    if (event.data.replace("BeginbSaveJPG", "").replace("EndbSaveJPG", "") == 'true') {
      ElMessage({ message: '拍照成功', type: 'success' });
      uploadImg()
    } else {
      ElMessage({ message: '拍照失败', type: 'error' });
    }
  }

  // 确定
  if (event.data.indexOf("BeginBase64Encode") >= 0) {
    let data = event.data.replace("BeginBase64Encode", "").replace("EndBase64Encode", "")
    let file = base64ToFile(data, state.myFileName)
    okBtn(file) // 传给父组件
  }
}
</script>

<style scoped lang="scss">

.photo {
  width: 406px;
  height: 80px;
  // background-image: url('@/assets/images/Frame [email protected]');
  background-size: contain;
  font-size: 40px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &:hover {
    filter: brightness(90%);;
  }
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
</style>