vue專案如何整合良田高拍儀（二次開發）

競~發表於2020-11-02
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'//記得記得一定要匯入良田高拍儀的js方法
export default {
  data(){
    return{
    	//這裡是設定引數的，因為我的專案暫時不需要更改，所以設了預設值，有需要的可以自行更改
	    baseUrl: '',
		socket: null,
		dialog: null,
		setScanSize: 'setScanSize_A4',
		priResolution: '1280 * 1024',
		subResolution: '1280 * 1024',
		priResolutionList: [],
		subResolutionList: [],
		send_priImgData: '',
		send_subImgData: '',
		send_priPhotoData: '',
	    send_subPhotoData: '',
	    allPhotosList:[],
	    name:'',
	    IDCard:'',
	    imgPath:'',
	    picBlob:undefined
    }
  },
  created(){
	},
	mounted(){
		this.baseUrl = 'ws://127.0.0.1:12345'//這個是預設的高拍儀外掛地址，需要用到websocket
		this.openSocket()
  },
  methods:{
		openVisible () {//初始化方法
        this.baseUrl = 'ws://127.0.0.1:12345'
        this.openSocket()
 		},
		openSocket(baseUrl){//初始化處理方法
			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) {
            //儲存成功返回地址
            if (message.indexOf('savePhoto_success:') >= 0) {
              self.imgPath = message.substr(18)
            }
            //使用人證對比的成功
            if (message.indexOf('success! Similarity degree:') >= 0) {
              self.$message({
                message: '人證對比成功',
                type: 'success'
              });
            }
            if (message.indexOf('fail! Similarity degree:') >= 0) {
              self.$message({
                message: '人證對比失敗',
                type: 'warning'
              });
            }
            // 主頭獲取到圖片質量列表。（可能存在取不到的情況）
            if (message.indexOf('priResolution:') >= 0) {
              message = message.substr(9)
              self.priResolutionList.push({
                label: message,
                value: message
              })
              if (self.priResolutionList.length > 3) {
                self.priResolution = self.priResolutionList[1].value
              }
            }
            // 副頭獲取到圖片質量列表。（可能存在取不到的情況）
            if (message.indexOf('subResolution:') >= 0) {
              message = message.substr(14)
              self.subResolutionList.push({
                label: message,
                value: message
              })
              if (self.subResolutionList.length > 3) {
                self.subResolution = self.subResolutionList[1].value
              }
            }
            //獲取身份證功能
            if(message.indexOf("IDcardInfo:") >= 0)
            {
              var index1 = message.indexOf(":")//獲取：的下標
              //返回型別（IDcardInfo:人名 性別 民族 出生年 出生月 出生日 身份證地址 身份證號碼 簽發機關 有效期開始年 有效期開始月 有效期開始日 有效期結束年 有效期結束月 有效期結束日 ）
              var messageArr=[];
              var pos = message.indexOf(' ');
              while(pos>-1){
                messageArr.push(pos);
                pos= message.indexOf(' ',pos+1);
              }
              self.name = message.substring(index1,messageArr[0])
              self.IDCard = message.substring(messageArr[6],messageArr[7])
            }
          })
          // 接收圖片流用來展示，多個，較小的base64，主頭資料
          self.dialog.send_priImgData.connect(function (message) {
            self.send_priImgData = 'data:image/jpg;base64,' + message
          })
          //接收圖片流用來展示，多個，較小的base64，副頭資料
          self.dialog.send_subImgData.connect(function (message) {
            self.send_subImgData = 'data:image/jpg;base64,' + message
          })
          // 接收拍照base64，主頭資料
          self.dialog.send_priPhotoData.connect(function (message) {
            self.send_priPhotoData = 'data:image/jpg;base64,' + message
          })
          //接收拍照base64，副頭資料
          self.dialog.send_subPhotoData.connect(function (message) {
            self.send_subPhotoData = 'data:image/jpg;base64,' + message
          })

          // 網頁載入完成訊號
          // self.dialog.html_loaded('one')
          self.dialog.html_loaded('two')
          self.dialog.set_configValue('set_savePath:C:/eloamFile')

          // 主頭檢查圖片質量列表能否獲取到，假如沒取到，就（反初始化，在初始化）
          if (self.priResolutionList.length == 0) {
            self.reloadSignal()
          }
          // 副頭檢查圖片質量列表能否獲取到，假如沒取到，就（反初始化，在初始化）
          if (self.subResolutionList.length == 0) {
            self.reloadSignal()
          }
        })
      }
    },
    // 設定圖片尺寸
    setScanSizeChange () {
      this.dialog.get_actionType(this.setScanSize)
    },
    // 重新初始化 為了獲取圖片質量
    reloadSignal () {
      this.dialog.get_actionType('closeSignal')
      setTimeout(() => {
        // this.dialog.html_loaded('one')//這是獲取一個攝像頭的，都是獲取主攝像頭
        this.dialog.html_loaded('two')//這是獲取兩個攝像頭的，一個主攝像頭，一個副攝像頭
      })
    },
    // 主頭切換圖片質量
    priResolutionChange () {
      this.dialog.devChanged('primaryDev_:' + this.priResolution)
    },
    // 副頭切換圖片質量
    subResolutionChange () {
      this.dialog.devChanged('submaryDev_:' + this.subResolution)
    },
    //觸發識別身份證
    readIDCard(){
      this.dialog.get_actionType("singleReadIDCard");
    },
    //人證對比功能
    verifyFaceDetect(){
      this.dialog.get_actionType("verifyFaceDetect");
    },
    handlePhoto (type) {
      switch (type) {
        case 'photo':
          this.dialog.photoBtnClicked('primaryDev_')
          this.dialog.get_actionType('savePhotoPriDev')
          break
        case 'photo2':
          this.dialog.photoBtnClicked('subDev_')
          this.dialog.get_actionType('savePhotoSubDev')
          break
        case 'left':
          this.dialog.get_actionType('rotateLeft')
          break
        case 'right':
          this.dialog.get_actionType('rotateRight')
          break
        case 'close':
          break
      }
    },
    //本地圖片轉流檔案
    fileToUrl(dataURI) {
      var reader = new FileReader();
      reader.readAsDataURL(dataURI);//發起非同步請求
      reader.onload = function(){
      //讀取完成後，將結果賦值給img的src
      return this.result;
      }
    },
    
	}
}
</script>

相關文章