项目中使用到高拍仪，用来简单的拍照片上传。

开发完后，看了下网上都是怎么集成的，全是一个版本的良田高拍仪集成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'

布局修改

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

主要是初始化方法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，不能通过文件流传，虽然高拍仪拍照后都是保存在本地了。但是不能静默的取到文件流，除非打开图片所在位置，选择上传。