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'