liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

Browse Source
This commit is contained in:
袁帅
2022-10-18 15:00:33 +08:00
parent 47c996265a
commit 4965600636
3 changed files with 910 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/faceLoginIE/index.html
View File

@ -6,16 +6,21 @@
<!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
<script src="jquery.js"></script>
<script src="jquery.webcam.min.js"></script>
<!-- <script src="excanvas.js"></script> -->
</head>
<body>
<div id="webcam" style="float: left; clear: both;"></div>
<!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
<img id="base64image" src='' width="450" height="320" style="float: left; clear: both;"/> -->
<script type="text/javascript">
var image = new Array();
var pos = 0;
var w = 382;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
var h = 200;
var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
var canvas = document.createElement("canvas");//创建画布指定宽度和高度
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
document.body.appendChild(canvas);
// canvas = window.G_vmlCanvasManager.initElement(canvas);
ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
$(document).ready(function() {
$("#webcam").webcam({
width: w,
@ -24,17 +29,38 @@
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) {
window.parent.postMessage({"image":image.join('|')}, '*');
var col = data.split(";");//把data切割为数组
var img = image;
//绘制图像
//参数data 只是每行的数据 ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
for(var i = 0; i < 320; i++) {
//转换为十进制
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
//当绘制320*240像素的图片时发给后端php
if (pos == 4 * 320 * 240) {
//把图像放到画布上,输出为png格式
ctx.putImageData(img, 0, 0);
window.parent.postMessage({"image": canvas.toDataURL("image/png")}, '*');
image = new Array();
pos = 0;
}
// image.push(data);
// pos += 4 * 320;
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
// if (pos >= 4 * 320 * 240) {
// window.parent.postMessage({"image":image.join('|')}, '*');
// image = new Array();
// pos = 0;
// }
},
onCapture: function() {
onCapture: function(data) {
webcam.save();
// Show a flash for example
},