前端使用（久派）高拍仪进行拍照上传

采用的技术为HTML5+css+JavaScript+bootstrap+jQuery

开始前需要将高拍仪的服务器（驱动）安装好

里面包含SDK

地址：WebCameraServerV2.61 Setup(1).exe文件大小：90.4 M|https://wwa.lanzoui.com/ise7ivhf5be接口文档：开发文档.pdf文件大小：196.1 K|https://wwa.lanzoui.com/iwaWjvhf80b

实现的主要功能有：拍照、本地保存并返回、放大、缩小、拍照生成base64数据，可以通过键盘快捷键控制拍照，保存图片的命名通过当前时间加三位随机数命名、打开页面自动启动高拍仪、清除当前等.....

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>窗口</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">.div1 {width: 1520%;height: 650px;}.input1 {padding: 10px 10px 10px 10px;margin: 45px 25px 25px 25px;}.input2 {padding: 5px 5px 5px 5px;margin: 35px 35px 25px 35px;position: page;}.div2 {float: left;width: 750px;height: 610px;}#ann {margin: 15px 30px 15px 35px;float: left;}#div3 {float: left;width: 700px;height: 610px;}#div4 {float: left;width: 70px;height: 650px;}</style></head><body><!--大--><div class="div1"><!--左边--><div id="div2"><img id="myCanvas" width='640' height='480' style="background-color: black; float: left;" /></div><!--中间--><div id="div3"><img id="myCanvas2" width='315' height='200' style="background-color: black; float: left;" /><img id="myCanvas3" width='315' height='200' style="background-color: black; float: left;" /><img id="myCanvas4" width='315' height='200' style="background-color: black; float: left;" /><img id="myCanvas5" width='315' height='200' style="background-color: black; float: left;" /><!--图片下按钮--><div id="ann"><input id="btnCaptureToFile" type="button" value="保存并返回" onclick="capturetofile()" class="input2" /><input id="fh" type="button" value="取消" onclick="getfh()" class="input2" /><input id="Button3" type="button" value="清除当前" onclick="deleteAllfile()" class="btn btn-large btn-primary " style="padding: 5px 5px 5px 5px;margin: 35px 35px 35px 25px;" /></div></div><!--右边--><div id="div4"><!--ip地址--><input id="serverIP" type="text" style="display:none" value="127.0.0.1" autofocus="autofocus" /><!--服务器端口--><input id="serverPort" type="text" style="display:none" value="7000" /><!--连接--><input id="btnConnect" type="button" style="display:none" onclick="connect()" /><!--断开--><input id="btnDisConnect" type="button" style="display:none" onclick="disconnect()" /><!--判断是否有连接--><input id="Button2" type="button" style="display:none" onclick="GetDevice()" /><!--打开设备--><input id="btnOpenDevice" type="button" style="display:none" onclick="opendevice()" /><!--关闭设备--><input id="btnCloseDevice" type="button" style="display:none" onclick="closedevice()" /><input id="btnZoomIn" type="button" value="放大" onclick="zoomin()" class="input1" /><br /><input id="btnZoomOut" type="button" value="缩小" onclick="zoomout()" class="input1" /><br /><input id="btnCapture" type="button" value="拍照" onclick="capture()" class="input1" /></div></div></body><script>var socket;
var b_capture = 0;function connect() {var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"// alert(host);socket = new WebSocket(host);try {socket.onopen = function(msg) {$("serverIP").disabled = true;$("serverPort").disabled = true;$("btnConnect").disabled = true;$("btnDisConnect").disabled = false;$("btnOpenDevice").disabled = false;$("btnCloseDevice").disabled = true;$("btnCapture").disabled = true;//socket.send("OpenIdCardEx@0");opendevice();};socket.onmessage = function(msg) {if(typeof msg.data == "string") {if(msg.data.indexOf("GetDevCount") == 0) {var s = msg.data.substring(12);if('2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备alert("检测到已经连接上摄像头");$("btnOpenDevice").disabled = false;$("btnCloseDevice").disabled = true;$("btnCapture").disabled = false;}}if(msg.data.indexOf('CloseDevice') == 0) {var s = msg.data.substring(12);if('1' == s) {var myimg = document.getElementById("myCanvas");myimg.src = null;$("btnOpenDevice").disabled = false;$("btnCloseDevice").disabled = true;$("btnCapture").disabled = true;}} else if(msg.data.indexOf('CloseVideo') == 0) {var s = msg.data.substring(11);if('1' == s) {var myimg = document.getElementById("myCanvas");myimg.src = null;$("btnOpenDevice").disabled = false;$("btnCloseDevice").disabled = true;$("btnCapture").disabled = true;}} else if(msg.data.indexOf('OpenVideo') == 0) {var s = msg.data.substring(10);if('1' == s) {$("btnOpenDevice").disabled = true;$("btnCloseDevice").disabled = false;$("btnCapture").disabled = false;}} else if(msg.data.indexOf('CaptureToFile') == 0) {} else if (msg.data.indexOf('Capture') == 0) {if (b_capture == 0) {b_capture = 1;var s = msg.data.substring(8);var myimg = document.getElementById("myCanvas2");myimg.src = "data:image/jpeg;base64," + s;}else if (b_capture == 1) {b_capture = 2;var s = msg.data.substring(8);var myimg = document.getElementById("myCanvas3");myimg.src = "data:image/jpeg;base64," + s;}else if (b_capture == 2) {b_capture = 3;var s = msg.data.substring(8);var myimg = document.getElementById("myCanvas4");myimg.src = "data:image/jpeg;base64," + s;}else if (b_capture == 3) {b_capture = 0;var s = msg.data.substring(8);var myimg = document.getElementById("myCanvas5");myimg.src = "data:image/jpeg;base64," + s;}} else if(msg.data.indexOf('MultiCapture') == 0) {} else if(msg.data.indexOf('MoveDetectEvent') == 0) {socket.send("Capture@2");/*} else if(msg.data.indexOf('IdCardEvent') == 0) {socket.send("UnFaceDetect");*/// socket.send("ReadIdCard");/*} else if(msg.data.indexOf('ReadIdCard') == 0) {var s = msg.data.substring(11);if('1' == s) {socket.send("GetIdCardResult");/*socket.send("GetIdCardImage@2");}*/} else if(msg.data.indexOf('GetBase64') == 0) {var s = msg.data.substring(10);var myimg = document.getElementById("myCanvas2");myimg.src = "data:image/jpeg;base64," + s;} else if(msg.data.indexOf('GetRecognitionFromFileName') == 0) {var s = msg.data.substring(27);var info = document.getElementById('info');info.value = s;} else if(msg.data.indexOf('GetOcrFromFileName') == 0) {var s = msg.data.substring(19);alert(s);var info = document.getElementById('info');info.value = s;}} else {var reader = new FileReader();reader.onload = function(msg) {if(msg.target.readyState == FileReader.DONE) {var url = msg.target.result;//alert(url);document.getElementById('myCanvas').src = url;}}reader.readAsDataURL(msg.data);}};socket.onclose = function(msg) {var myimg = document.getElementById("myCanvas");myimg.src = null;$("serverIP").disabled = false;$("serverPort").disabled = false;$("btnConnect").disabled = false;$("btnDisConnect").disabled = true;$("btnOpenDevice").disabled = true;$("btnCloseDevice").disabled = true;$("btnCapture").disabled = true;};} catch(ex) {log(ex);}}function disconnect() {socket.close();socket = null;}function GetDevice() {socket.send("GetDevCount");}function opendevice() {socket.send("OpenDevice@1");socket.send("SetResolution@2@2048@1536");socket.send("OpenVideo");}//关闭摄像头。function closedevice() {socket.send("CloseDevice");}//拍照。function capture() {socket.send("Capture@2");}/*     //多拍照。function multicapture() {socket.send("MultiCapture@2");}*///启动纠偏裁边。function deskew() {socket.send("Deskew");}//停止移动侦测功能。function unmovedetect() {socket.send("UnMoveDetect");}//显示摄像头分辨率调节对话框。function showpin() {socket.send("ShowPin");}//显示摄像头属性调节对话框。function showfilter() {socket.send("ShowFilter");}function barcode() {socket.send("GetBarcode");}//图片保存到本地function capturetofile() {var date=new Date();var year=date.getFullYear();/* 在日期格式中，月份是从0开始的，因此要加0* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05* */var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();// 拼接time = year+""+month+""+day+" "+hours+""+minutes+""+seconds;//           alert(a.charAt(parseInt(Math.random() * a.length + 1)) + ' ' + new Date());/*  //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值var name = prompt("请输入图片名字", "");if(name != "" && name != null) {alert("保存到D盘，" + name + ".jpg");socket.send("CaptureToFile@D:/" + name + ".jpg");}*//*alert("保存到D盘，" + mytime+  ' ' + Math.random().toString(36).substr(2).slice(1,4)+".jpg");socket.send("CaptureToFile@D:/" +mytime + ' ' + Math.random().toString(36).substr(2).slice(1,4) +  ".jpg");*/alert("当前保存一张" +time+ ' ' + Math.random().toString(36).substr(2).slice(1, 4) + ".jpg"+""+"到D盘");//图片保存地址socket.send("CaptureToFile@D:/" +time+ ' ' + Math.random().toString(36).substr(2).slice(1, 4) + ".jpg");window.location = "index.html";}function filename() {}//获取base64数据function getbase64() {socket.send("GetBase64@D:/1.jpg");}/*  //二代身份证触发function ReadIdCard() {socket.send("OpenIdCardEx@0");socket.send("ReadIdCard");}*/function getrecognition() {socket.send("GetRecognitionFromFileName@D:/1.jpg@3");}/* function getocr() {alert("请在d盘，放置jpg的图片进行识别");socket.send("GetOcrFromFileName@D:/1.jpg");}*///返回function getfh() {alert("返回上一页面");window.location = "index.html";}//放大function zoomin() {socket.send("ZoomIn");}//缩小function zoomout() {socket.send("ZoomOut");}//清除function deleteAllfile() {var myimg = document.getElementById("myCanvas2");myimg.src = null;var myimg = document.getElementById("myCanvas3");myimg.src = null;var myimg = document.getElementById("myCanvas4");myimg.src = null;var myimg = document.getElementById("myCanvas5");myimg.src = null;b_capture = 0}window.onload = function() {var myimg = document.getElementById("myCanvas");myimg.src = null;$("serverIP").disabled = false;$("serverPort").disabled = false;$("btnConnect").disabled = false;$("btnDisConnect").disabled = true;$("btnOpenDevice").disabled = true;//关闭摄像头$("btnCloseDevice").disabled = true;$("btnCapture").disabled = true;connect();}window.onbeforeunload = function() {disconnect();};function $(id) {return document.getElementById(id);}//键盘触发事件//拍照保存window.onkeydown = function(ev) {var event = ev || eventif(event.keyCode == 13) {var date=new Date();var year=date.getFullYear();/* 在日期格式中，月份是从0开始的，因此要加0* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05* */var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();// 拼接time = year+""+month+""+day+" "+hours+""+minutes+""+seconds;alert("当前保存一张" +time+ ' ' + Math.random().toString(36).substr(2).slice(1, 4) + ".jpg"+""+"到D盘");socket.send("CaptureToFile@D:/" +time+ ' ' + Math.random().toString(36).substr(2).slice(1, 4) + ".jpg");window.location = "index.html";}}//base64拍照document.onkeydown = function(kg) {var event = kg || eventif(event.keyCode == 32) {socket.send("Capture@2");}}/*    //清除document.onkeydown = function(dl) {var event = dl || eventif(event.keyCode == 46) {var myimg2 = document.getElementById("myCanvas2");var myimg3 = document.getElementById("myCanvas3");var myimg4 = document.getElementById("myCanvas4");var myimg5 = document.getElementById("myCanvas5");myimg2.src = null;myimg3.src = null;myimg4.src = null;myimg5.src = null;}}*//*//放大document.onkeydown = function(fd) {var event = fd || eventif(event.keyCode == 107) {socket.send("ZoomIn");}}//缩小window.onkeydown = function(sx) {var event = sx || eventif(event.keyCode == 109) {socket.send("ZoomOut");}}*//*            //返回window.onkeydown = function(es) {var event = es || eventif(event.keyCode == 27) {}}*//*     $(document).keyup(function(event) {　　　　if(event.keyCode === 27) {　　　　　　window.location = "index.html";　　　　}　　});*/</script></html>

效果图：

前端使用（久派）高拍仪进行拍照上传相关推荐

讯派高拍仪联合钉钉使用教程
讯派高拍仪联合钉钉使用教程产品型号:便携式实物展台HV600(HDMI) www.shyiyou.cn 要在浏览器中复制网址打开,不建议直接用微信或者QQ打开打开之后的界面: 先去下载中心---- ...
高拍仪用法及部分问题处理
一.接入项目并使用 1.1 安装高拍仪驱动下载地址: https://www.eloam.cn/download/list/1 安装完成之后,打开驱动程序,即可看到接入的高拍仪的图像. 1.2 网页 ...
良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
c++ 二次开发良田高拍仪_良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
紫光高拍仪C5422二次嵌入开发
1.客户端请安装紫图高拍仪驱动,并注册OCX(注册;方法:双击C:\ProgramFiles\CmCaptureOcx\OCX目录_Install.bat文件) 安装的时候要用管理员打开不然部分机 ...
思源高拍仪万能驱动_动态展示和教学良田YL1050AF高拍仪评测
高拍仪的一大特点就是灵活多样,通过不同的工业设计用于文件扫描.视频展示.多媒体教学.信息采集.体温监测等等.良田最新款YL1050AF教学高拍仪通过巧妙的设计和专业的软件,为教学.培训.实时展示等应用 ...
维山VS073高拍仪技术规格说明书
一.产品介绍婚姻登记专用设备实现自动录入当事人个人生物特征信息(人脸.指纹) .信息采集:实现电子签名.文件档案电子化(高拍仪),实现婚姻登记高效精准服务. 二.技术参数技术参数 01 文 ...
方正高拍仪文件上传到服务器,高拍仪拍摄文件后如何进行文字识别？本地文件能否导入高拍仪进行识别？...
原标题:高拍仪拍摄文件后如何进行文字识别?本地文件能否导入高拍仪进行识别? 日常办公和学习中,常常有许多资料需要进行二次编辑,但受限于文件是纸质文档或者图片文件,无法直接进行二次编辑,只能把相关信息手 ...
串口屏应用案例_大彩串口屏在高拍仪上的应用方案
一.概况高拍仪也有人称为速拍仪,或有的教育机构称之为备课王.一般来说,我们称之为高拍仪.是最新研发出来的一款超便携低碳办公用品,也是一款办公领域革新性产品,它具有折叠式的超便捷设计,能完成一秒钟高速 ...
web端刷卡器_web工程集成身份证读卡器，高拍仪
接到个模块,要在已有的web工程里集成身份证读卡器,高拍仪等硬件.一时摸不着头脑,网上搜了下,发现都写的高端到看不懂.后来找了个已成功集成的web工程研究了下,发现弱爆了.这种硬件设备都已经做好了对w ...

前端使用（久派）高拍仪进行拍照上传

前端使用（久派）高拍仪进行拍照上传相关推荐

最新文章

热门文章