如何在vue项目中使用高拍仪

项目中使用到高拍仪，用来简单的拍照片上传。
开发完后，看了下网上都是怎么集成的，全是一个版本的良田高拍仪集成vue项目
把demo中的东西直接copy来，就用上了。
这样在原生h5项目中使用无可厚非，但是放到vue项目中，直接操作dom，还是不太习惯。
自己修改了下，顺便整理下过程。
最终效果如下：

image.png

首先安装驱动：

image.png

逐个安装，然后替换video.flt就是了。
连上高拍仪，demoOne走起，确认硬件没问题能用。主要依赖的是qwebchannel.js。

image.png

既然要集成，首要任务就是引入qwebchannel.js，看了下代码，做的还是比较银杏的，输出了“QWebChannel”。可以直接用了。

image.png

拿来直接引入

  import { QWebChannel } from '@/utils/qwebchannel.js'

布局修改

<template v-if="uploadType==2">

            <div class="tool-header theme-light">
              <ul class="tool-item">
                <li>
                  <span style="margin-left: 10px;">图片质量：</span>
                  <el-select v-model="priResolution" style="width:145px !important;" placeholder=""
                             @change="priResolutionChange">
                    <el-option v-for="(item,index) in priResolutionList"
                               :key="index"
                               :label="item.label"
                               :value="item.value">
                    </el-option>

                  </el-select>
                </li>

                <li>
                  <span>图片尺寸：</span>
                  <el-select v-model="setScanSize" style="width: 145px !important;" placeholder=""
                             @change="setScanSizeChange">
                    <el-option label="原始尺寸" value="setScanSize_ori"></el-option>
                    <el-option label="A5" value="setScanSize_A5"></el-option>
                    <el-option label="A4" value="setScanSize_A4"></el-option>
                    <el-option label="卡片" value="setScanSize_card"></el-option>
                  </el-select>
                </li>
                <li>
                  <el-button @click="handlePhoto('left')" >左转</el-button>
                  <el-button @click="handlePhoto('right')">右转</el-button>
                  <el-button @click="handlePhoto('photo')">拍照</el-button>
                </li>
              </ul>
            </div>

            <div class="photo_wrap">
              <div class="item_l">
                <img :src="send_priImgData" id="bigPriDev"/>
              </div>
              <div class="item_r">
                <p v-if="send_priPhotoData" class="desc">点击图片查看大图</p>
                <img v-if="send_priPhotoData" :src="send_priPhotoData" id="devPhoto" @click="showBigImg"/>
              </div>
            </div>

</template>

其中，重要是获取图片质量列表，设置图片尺寸，控制拍摄内容左转、右转，以及拍照。
主要是初始化方法openSocket，

data () {
      return {
        baseUrl: '',
        socket: null,
        dialog: null,
        setScanSize: 'setScanSize_A4',
        priResolution: '1280 * 1024',
        priResolutionList: [],
        send_priImgData: '',
        send_priPhotoData: '',
      }
 },
....
openVisible () {
        this.baseUrl = 'ws://127.0.0.1:12345'
        this.openSocket()
 },
openSocket () {
        let self = this
        let 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) {
              console.log(message)
              if (message.indexOf('savePhoto_success:') >= 0) {
              }
              // 获取到图片质量列表。（可能存在取不到的情况）
              if (message.indexOf('priResolution:') >= 0) {
                message = message.substr(14)
                self.priResolutionList.push({
                  label: message,
                  value: message
                })
                if (self.priResolutionList.length > 3) {
                  self.priResolution = self.priResolutionList[1].value
                }
                console.log(self.priResolutionList)
                console.log(self.priResolution)
              }
            })
            // 接收图片流用来展示，多个，较小的base64，主头数据
            self.dialog.send_priImgData.connect(function (message) {
              self.send_priImgData = 'data:image/jpg;base64,' + message
            })
            // 接收拍照base64，主头数据
            self.dialog.send_priPhotoData.connect(function (message) {
              self.send_priPhotoData = 'data:image/jpg;base64,' + message
            })

            // 网页加载完成信号
            self.dialog.html_loaded('one')
            self.dialog.set_configValue('set_savePath:C:/eloamFile')

            // 检查图片质量列表能否获取到，假如没取到，就（反初始化，在初始化）
            if (self.priResolutionList.length == 0) {
              self.reloadSignal()
            }
          })
        }
      },
      // 设置图片尺寸
      setScanSizeChange () {
        this.dialog.get_actionType(this.setScanSize)
      },
      // 重新初始化 为了获取图片质量
      reloadSignal () {
        this.dialog.get_actionType('closeSignal')
        setTimeout(() => {
          this.dialog.html_loaded('one')
        })
      },
      // 切换图片质量
      priResolutionChange () {
        console.log(this.priResolution)
        this.dialog.devChanged('primaryDev_:' + this.priResolution)
      },
      handlePhoto (type) {
        console.log(type)
        switch (type) {
          case 'photo':
            this.dialog.photoBtnClicked('primaryDev_')
            this.dialog.get_actionType('savePhotoPriDev')
            break
          case 'left':
            this.dialog.get_actionType('rotateLeft')
            break
          case 'right':
            this.dialog.get_actionType('rotateRight')
            break
          case 'close':
            break
        }
      }

完事。
至于上传，这里只能传base64，不能通过文件流传，虽然高拍仪拍照后都是保存在本地了。但是不能静默的取到文件流，除非打开图片所在位置，选择上传。