今日分享，利用JQ+FLASH+PHP实现PC端浏览器在线定时或手动拍照的代码，这块我自己主要是用在培训期间学员在线考试时试卷自动拍照片存档。
下面先放出两个核心文件，一个是web浏览器页面在线拍照，另一个是将所拍照片存储在服务器指定文置上。
1、web页面显示摄像头页面 ---index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.webcam.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="cam" style="position: fixed; z-index: 300; width: 0; height: 0;
right: 0px; top: 0px; border: solid 2px #000;">
<div id="camBox">
<div id="webcam">
</div>
</div>
</div>
<div>
<input type="button" id="cli" value="拍照" />
</div>
<canvas id="canvas" style="border:1px solid red"></canvas>
</body>
<script type="text/javascript">
//var canvas = document.createElement("canvas");
//canvas.setAttribute('width', 320);
//canvas.setAttribute('height', 240);
var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高
canvas.setAttribute('width', 320);//通过代码设置宽高属性，避免图片无法自适应画布的问题
canvas.setAttribute('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, 320, 240);//复制画布上指定矩形的像素数据,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: "jscam_canvas_only.swf",
onTick: function (remain) { },
onSave: function (data) {
//图片处理
var col = data.split(";");
//x轴上的每一个像素的rgba
for (var i = 0; i < 320; 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 * 320 * 240) {
ctx.putImageData(img, 0, 0);//将图像显示到画布
$.post("cut.php", {type: "data", image: canvas.toDataURL("image/jpeg")},function(result){console.log(result)});//上传图片到服务器。
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();
})
});
setInterval("$('#cli').click()",5000);//定时每5秒钟自动拍照片
</script>
</html>上面这段代码中有一行代码 id="cam" style=" width: 0; height: 0;" 主要是为了隐藏FLASH显示，做为隐藏式拍照的需求。如果需要显示，自己设置一下大小即可。
同时，拍照所生成的图片文件可以是png也可是jpg，文件1和文件2，对应位置自己配置一下即可，不用修改其它文件。
2、摄像头拍照片后用于存储照片到指定服务器目录位置 ---cut.php
<?php
$image_type=$_POST['type'];
$image_data=$_POST['image'];
$img = str_replace('data:image/jpeg;base64,', '', $image_data);
$img = str_replace(' ', '+', $img);
$data = base64 _decode($img); //这里因为虚拟主机的安全检测，无法直接写base64 _decode，请将下划线前的空格去掉
// 图片名称
$file_name = "uploads/".time().".jpg";//以时间戳命名
$fp = fopen($file_name, 'w');
fwrite($fp, $data);
fclose($fp);
?>最后，总结一下
WEB页面利用摄像头拍照这个方案我在网上也搜索过，所有给出的代码都是部分的，不是少flash文件，就是jq的版本不对不能支持运行，所以在这段程序里面用到的jquery.webcam.min.js和jquery-2.1.4.min.js，其实还包含了jscam_canvas_only.swf这个FLASH文件，我直接打包文件一并共享出来，免得大家再到处找这些文件了。
之前还发了一个利用JQ和PHP来做人脸识别的博文（含源代码），其实可以和这个一起组合利用一下，比如在Web考试系统中需要在考生考试过程中拍照片，又希望拍到的照片是有效的，如果低头或是脸部有遮挡应该判定这张照片无效，就用到了人脸识别，如果识别人脸有效，就保存不重新拍照了。
虽然这只是一个简单应用，和专业级的人脸拍照和对比无法媲美，但还是给我们提供了一点思路。
JQ+PHP实现浏览器webcam摄像头在线定时自动拍照存储照片源代码下载