前端使用身份證閱讀器(高拍儀)內建vue項目

最近做背景管理項目的時候 遇到一個問題 就是使用高拍儀讀取身份證資訊（良田高拍儀） 然後內建在頁面上面 當時一臉懵逼 硬體互動 怎麼內建在浏覽器呢  于是問客服 客服一堆廢話  連個js檔案都沒有 就讓去看文檔  估計是不懂技術  然後自己慢慢的琢磨着  然後下載下傳他們的sdk以及其他的控件 都可以正常使用了 但是 此時又出現一個問題 就是浏覽器不支援 最後又找他們 他們從新給發了最新的sdk安裝包

裡面包含了js檔案 算是都解決了 高拍儀就不看了 下面直接說該怎麼實作具體的功能吧 

 此時我這邊沒有連接配接高拍儀 而且還沒有搞那麼多複雜的東西 是以頁面功能比較簡單

首先把js引入

1 把功能方法給封裝起來

// 回調函數
var getMessage;
export function inits(getMessageArgs) {
    getMessage = getMessageArgs;
    let baseUrl = 'ws://127.0.0.1:12345';
    output("Connecting at " + baseUrl + ".");
    openSocket();
    window.output = output;
    setInterval(()=>{
      startIDCard()
    },1000)
  };
  function startIDCard() {
    dialog.get_actionType("startIDCard");
  }
  function output(message){
    var output = document.getElementById("output");
    output.innerHTML = output.innerHTML + message + "\n";
    output.scrollTop = output.scrollHeight;
  }
  function openSocket() {
    let IdCardList = []
    var socket = new WebSocket('ws://127.0.0.1:12345');
    socket.onclose = function()
    {
      console.error("web channel closed");
    };
    socket.onerror = function(error)
    {
      console.error("web channel error: " + error);
    };
    socket.onopen = function()
    { 
      window.output("WebSocket start connect");
      new QWebChannel(socket, function(channel) {
        // make dialog object accessible globally
        window.dialog = channel.objects.dialog;
        //網頁關閉函數
        window.onbeforeunload = function() {
          dialog.get_actionType("closeSignal");
          socket.close();
        }
        window.onunload = function() {
          dialog.get_actionType("closeSignal");
          socket.close();
        }
        //反初始化
        document.getElementById("closeHtml").onclick = function() {
          dialog.get_actionType("closeSignal");
          var element = document.getElementById("bigPriDev");
          element.src = "";
        };
        //初始化
        document.getElementById("openHtml").onclick = function() {
          dialog.html_loaded("one");
        };
        //裝置清單點選
        document.getElementById("devList").onchange = function() {
          //清除展示資訊
          var resolutionList = document.getElementById("resolutionList");
          resolutionList.options.length = 0;
          var modelList = document.getElementById("modelList");
          modelList.options.length = 0;
          var select = document.getElementById("devList");
          dialog.devChanged("primaryDev_:" + select.value);
        };
        //模式清單點選
        document.getElementById("modelList").onchange = function() {
          //清除展示資訊
          var resolutionList = document.getElementById("resolutionList");
          resolutionList.options.length = 0;
          var select = document.getElementById("modelList");
          dialog.devChanged("primaryDev_:" + select.value);
        };

        //分辨率清單點選
        document.getElementById("resolutionList").onchange = function() {
          //清除展示資訊
          var select = document.getElementById("resolutionList");
          dialog.devChanged("primaryDev_:" + select.value);
        };
        //打開視訊
        document.getElementById("openPriVideo").onclick = function() {
          //清除展示資訊
          var resolutionList = document.getElementById("resolutionList");
          resolutionList.options.length = 0;
          var modelList = document.getElementById("modelList");
          modelList.options.length = 0;
          var select = document.getElementById("devList");
          dialog.devChanged("primaryDev_:" + select.value);
        };
        //關閉視訊
        document.getElementById("closePriVideo").onclick = function() {
          dialog.get_actionType("closePriVideo");
          var element = document.getElementById("bigPriDev");
          element.src = "";
        };
        //拍照按鈕點選
        document.getElementById("photographPri").onclick = function() {
          dialog.photoBtnClicked("primaryDev_");
          dialog.get_actionType("savePhotoPriDev");
        };
        //左轉
        document.getElementById("rotateLeft").onclick = function() {
          dialog.get_actionType("rotateLeft");
        };
        //右轉
        document.getElementById("rotateRight").onclick = function() {
          dialog.get_actionType("rotateRight");
        };
        //屬性設定
        document.getElementById("showProperty").onclick = function() {
          dialog.get_actionType("showProperty");
        };
        //糾偏裁邊
        document.getElementById("setdeskew").onclick = function() {
          dialog.get_actionType("setdeskew");
        };
        //擷取檔案base64
        document.getElementById("getFileBase64").onclick = function() {
          dialog.get_functionTypes("getFileBase64","C:\\12345100.pdf" , "","");
          //dialog.get_functionTypes("getFileBase64","C:/1234.pdf" , "","");
        };
        //圖檔合成pdf
        document.getElementById("composePDF").onclick = function() {
          if(imgPathArray.length > 0)
          {
            for (var i = 0; i < imgPathArray.length; i++)
            {
              //發送合成pdf圖檔的路徑，第2個參數：圖檔檔案路徑，第3，第4個參數為空
              var path = imgPathArray[i];
              if(path.indexOf("file:///") >= 0)
              {
                path = path.substr(8);
              }
              dialog.get_functionTypes("sendPDFImgPath", path, "","");
            }
            //發送合成pdf指令
            //第2個參數：儲存路徑，如果該路徑不存在則儲存在.exe檔案下的eloamFile檔案夾
            //第3個參數：儲存檔案名稱，如果為空則按照目前時間命名，
            //第4個參數為空
            dialog.get_functionTypes("composePDF", "C:" , "eloamFile\\1234", "");
          }
        };
        //删除本地檔案
        document.getElementById("deleteFile").onclick = function() {
          //dialog.get_functionTypes("deleteFile", "C:\\Users\\Administrator\\Desktop\\eloamPhoto\\20180903-200102046.jpg", "", "");
          //dialog.get_functionTypes("deleteFile", "C:/Users/Administrator/Desktop/eloamPhoto/eeee.jpg", "", "");
          for (var i = 0; i < imgPathArray.length; i++)
          {
            //删除檔案，第2個參數：圖檔檔案路徑，第3，第4個參數為空
            var path = imgPathArray[i];
            if(path.indexOf("file:///") >= 0)
            {
              path = path.substr(8);
            }
            dialog.get_functionTypes("deleteFile", path, "", "");
          }
          removeAll();
          //imgPathArray = [];
        };
        //圖檔儲存參數
        document.getElementById("setImageProperty").onclick = function() {
          //第二個參數是圖檔dpi，正整數
          //第三個參數是圖檔儲存品質：10表示最高品質，1表示較高品質，2表示中等品質,3表示較差品質，4表示差品質
          //如果參數為空則表示預設
          dialog.get_functionTypes("setImageProperty", "300" , "", "");
        };

        //伺服器傳回消息
        // dialog.sendPrintInfo.connect(function(message) {
        //   let IDcardInfo="IDcardInfo:";
        //   if(message.indexOf(IDcardInfo)>=0){
        //     IDcardInfo=message.substr(IDcardInfo.length)
        //     IdCardList = IDcardInfo.split(" ")
        //     console.log(IdCardList)
        //   }
        // });
        dialog.sendPrintInfo.connect(getMessage);
        //接收圖檔流用來展示，多個，較小的base64資料
        dialog.send_priImgData.connect(function(message) {
          var element = document.getElementById("bigPriDev");
          element.src = "data:image/jpg;base64," + message;
        });
        //接收拍照base64
        dialog.send_priPhotoData.connect(function(message) {
          var element = document.getElementById("devPhoto");
          element.src = "data:image/jpg;base64," + message;
        });
        window.output("ready to send/receive messages!");
        //網頁加載完成信号
        dialog.html_loaded("one");
      });
    }
  }
           

需要什麼 就看看它那裡面的3個demo 我這裡面是簡單的  因為都是js 是以很多都是直接操作dom 是以不要随便該他們的id名

 然後在頁面裡面直接調用

<template>
  <div>
    <div>
    <img id="bigPriDev" width="640" height="480"  /></img>
    <img id="devPhoto" width="360" height="270"  /></img>
    <textarea style="width: 500px;height: 500px;" id="output"></textarea><br />
    <br />
      <input id="startIDCard" @click="startIDCard" type="button" value="啟動二代證閱讀" />
    <tr>
      <input id="openHtml" type="button" value="初始化" />
      <input id="closeHtml" type="button" value="反初始化" />
      <br />
      裝置清單：<select id="devList" style="width: 120px" ></select>
      <select id="modelList" style="width: 120px" ></select>
      <select id="resolutionList" style="width: 120px" ></select>
      <input id="openPriVideo" type="button" value="打開主視訊" />
      <input id="closePriVideo" type="button" value="關閉主視訊"  />
      <input id="photographPri" type="button" value="拍照"  />
      <br />
      <input id="setdeskew" type="checkbox" value="" />糾偏裁邊
      <input id="rotateLeft" type="button" value="左轉" />
      <input id="rotateRight" type="button" value="右轉" />
      <input id="showProperty" type="button" value="屬性設定" />
      <input id="composePDF" type="button" value="合成PDF" />
      <input id="deleteFile" type="button" value="删除檔案" />
      <input id="getFileBase64" type="button" value="擷取檔案base64" />
      <input id="setImageProperty" type="button" value="圖檔儲存參數" />
      <br />
      <div id="container" style="float:left;"> </div>
    </tr>
    </div>
  </div>
</template>
<script>
// import {inits} from "../../../utils/qwebchannel"
  export default {
    data() {
      return {
        baseUrl: 'ws://127.0.0.1:12345',
        IdCardList:[]
      }
    },
    mounted() {
      inits((message) => {
        let IDcardInfo = "IDcardInfo:";
        if(message.indexOf(IDcardInfo) >= 0){
          IDcardInfo=message.substr(IDcardInfo.length)
          this.IdCardList = IDcardInfo.split(" ")
          console.log(this.IdCardList)
        }
      })
    }
  }
</script>

<style scoped>
  @import "[email protected]/styles/form.css";
</style>
           

可以看一下傳回的資料

over