2021/01/31最近公司需求做一个人脸识别系统，但是前端需要使用IE11浏览器，我们从网上搜集了很多资料证明，IE只能使用flash才行（此时flash已经宣布停止维护，但是它的ActiveX依旧可以使用）。
需要的jar包和swf和flash：
| 名称 | 用途 |
|---|---|
| bluebird.js | IE不兼容promis可以引入这个 |
| webcammin.js | 兼容IE调取摄像头 |
| jquery-182.js | 使用jquery的webcam函数 |
| jscam.swf | 兼容IE调取摄像头 |
| jscam_canvas_only.swf | 兼容IE调取摄像头 |
| Adobe Flash Player 29 ActiveX | 必须使用29或以下版本，最新的34版本不管用！ |
以上文件我也没了。。大家自行百度吧
授人以鱼不如授人以渔，网上很多方案都是半半拉拉的，我在这里整合一下，弄一套完整的粘贴即用的方案，第一次写可能不完整，若出现问题欢迎及时指正和联系。
以上文件全部引入后，编写jsp：只要以上文件成功引入，以下代码应该是粘贴即用（代码里有对用户的是否登录的校验需要删减以下）
拍照后，生成base64的编码传到后台调用接口进行人脸识别。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>修改用户姓名</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
<!--
.style1 { font-size: 14px;
color: #FFFFFF;
}
.style2 { font-size: 12px}
.STYLE4 {
font-size: 40px;
color: black;
font-family: "隶书";
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/function.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-182.js"></script>
<script type="text/javascript" src="js/ymPrompt.js"></script>
<script type="text/javascript" src="js/webcammin.js"></script>
<script type="text/javascript" src="js/bluebird.js"></script>
</head>
<body oncontextmenu = "return true">
<table width="600" border="00" align="center" cellpadding="0" cellspacing="0" style="margin-top:100px">
<tr align="center">
<td><span class="STYLE4">人脸采集</span><img src="images/newimage/logo2.jpg" height="64" align="absBottom"></td>
</tr>
</table>
<%
//String yhzh = (String)session.getAttribute("yhzh");
String yhdh = (String)session.getAttribute("yhdhrl");
if(yhdh==null){
out.println("<script>");
out.println("alert('非法途径使用本功能，请重新登录');");
out.println("document.location.href='inputpas1024.jsp';");
out.println("</script>");
return;
}
String yhxm=(String)request.getAttribute("yhxm");
%>
<p> </p>
<p> </p>
<div>
<table>
<tr align="center">
<td>
<span class="STYLE4" style="margin-left:500px;">摄像区域</span>
<span class="STYLE4" style="margin-left:350px;">截图区域</span>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td width="417" height="400" background="images/newimage/aaaaa.gif"> </td>
</tr>
</table>
</div>
<div style='margin-top:-400px'>
<div id="cam" style="position: fixed; z-index: 300; width: 500px; height: 400px;
margin-left:300px; border: solid 2px #000;">
<div id="camBox">
<div id="webcam">
</div>
</div>
</div>
<div style="float:right;margin-right:300px">
<canvas id="canvas" style="border:1px solid black"></canvas>
<form name="form1" id="form1" method="post" onSubmit="return false;">
<input type='hidden' name="base64img" id="base64img" type="text" value="">
</form>
<div>
<input type="button" id="cli" value="拍照" style="width:50px;height:30px;margin-left:80px"/>
<input type="button" id="sc" value="上传" style="width:50px;height:30px;margin-left:80px"/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//var canvas = document.createElement("canvas");
//canvas.setAttribute('width', 320);
//canvas.setAttribute('height', 240);
var videow = document.getElementById('cam').clientWidth;
var videoh = document.getElementById('cam').clientHeight;
var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高
canvas.setAttribute('width', videow);//通过代码设置宽高属性，避免图片无法自适应画布的问题
canvas.setAttribute('height', videoh);
// canvas.width=320;
// canvas.height=240;
var image = new Array();
var ctx = null;
var pos = 0;
var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
var h = 240;
//getContext("2d") 对象内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
//可理解为 返回一个用于在画布上绘图的环境，并获得画布的绘图方法对象
var ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 500, 400);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置
var img = image;//设置img的属性和值，拍照时重新给data赋值
//解释Canvas 的ImageData对象，width:图片宽度，height:高度，单位都为像素
//data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围是0-255
//rgba(red, green, blue, alpha),前三个红绿蓝，范围0-255整数或0%-100%，alpha透明度，0.0-1.0
$(document).ready(function () {
$("#webcam").webcam({
width: 500,
height: 400,
mode: "callback",
swffile: "js/jscam.swf",
onTick: function (remain) { },
onSave: function (data) {
//图片处理
var col = data.split(";");
//x轴上的每一个像素的rgba
for (var i = 0; i < 500; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;//red
img.data[pos + 1] = (tmp >> 8) & 0xff;//green
img.data[pos + 2] = tmp & 0xff;//blue
img.data[pos + 3] = 0xff;//Alpha
pos += 4;
}
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
if (pos >= 4 * 500 * 400) {
ctx.putImageData(img, 0, 0);//将图像显示到画布
image = new Array();
pos = 0;
}
},
onCapture: function () {
//拍照，处理图片
webcam.save();
},
onLoad: function () {
var cams = webcam.getCameraList();//获取本机摄像头设备
for (var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
});
//点击拍照按钮
$("#cli").click(function () {
window.webcam.capture();
})
$("#sc").click(function () {
var base64Img = canvas.toDataURL('image/jpg');
form1.base64img.value = base64Img;
var qweqew= $('form1').serialize();
console.log(qweqew);
console.log('base64Img',base64Img);
new Ajax.Request(//清除ajax缓存的最好方法就是让他每次访问的url都不同，那就加个随机数喽
'login.do?method=rlcj',{
method:'post',
parameters: {
'base64img':base64Img
},
onComplete:showSucess
}
);
})
function showSucess(response){
alert("用户姓名修改成功，请重新登录！");
}
});
</script>
</html>
