Files
fe_service_ebtp_frontend/public/faceLoginIE/index.html

64 lines
2.4 KiB
HTML
Raw Normal View History

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-master</title>
<link href="cs.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.webcam.min.js"></script>
</head>
<body>
<div id="webcam"></div>
<input id="snapBtn" type="button" value="拍照" />
<img id="base64image" src='' />
<script type="text/javascript">
var image = new Array();
var pos = 0;
var w = 320;//图片的宽高,无论图片的尺寸是否大于画布的尺寸都能自适应
var h = 240;
$(document).ready(function() {
$("#webcam").webcam({
width: w,
height: h,
mode: "callback",
swffile: "jscam_canvas_only.swf", // 这里引入swf文件注意路径
onTick: function(remain) {},
onSave: function(data) {
image.push(data);
pos += 4 * 320;
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
if (pos >= 4 * 320 * 240) {
var url ='http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64';
$.post(url, {type: 'pixel', rgb: image.join('|')}, function(result){
$('#base64image').attr('src', 'data:image/jpg;base64,' + result.data);
});
image = new Array();
pos = 0;
}
},
onCapture: function() {
webcam.save();
// Show a flash for example
},
debug: function(type, string) {
console.log('type:' + type + ',string:' + string);
// Write debug information to console.log() or a div
},
onLoad: function() {
// Page load
}
});
$('#snapBtn').on('click', function() {
webcam.capture();
});
});
</script>
</body>
</html>