采用的技术为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 || event
if(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 || event
if(event.keyCode == 32) {
socket.send("Capture@2");
}
}
/* //清除
document.onkeydown = function(dl) {
var event = dl || event
if(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 || event
if(event.keyCode == 107) {
socket.send("ZoomIn");
}
}
//缩小
window.onkeydown = function(sx) {
var event = sx || event
if(event.keyCode == 109) {
socket.send("ZoomOut");
}
}*/
/* //返回
window.onkeydown = function(es) {
var event = es || event
if(event.keyCode == 27) {
}
}*/
/* $(document).keyup(function(event) {
if(event.keyCode === 27) {
window.location = "index.html";
}
});*/
</script>
</html>效果图：
2630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
