简介
本来做项目碰到了挪用摄像头功用，php小白碰到这状况马上就去网上搜刮，最后用的
https://www.helloweba.com/vie…，太烂了，作者也没说怎样去运用，假如用的是框架开辟更是很贫苦
本日再次发明一款比较天真的插件jQuery webcam plugin，资本链接：http://www.xarg.org/project/j…【demo】
运用要领
- width: 320, height: 240,//这两个参数考虑到显现结果320*240为规范的显现形式，不可变动（插件硬伤）。假如要修正大小实在也是能够的，修正jscam.swf源文件
- mode：// 存储体式格局能够按以下三种体式格局callback | save | stream
- swffile：//能够挑选解压后jscam_canvas_only.swf或jscam.swf，jscam_canvas_only加快了每次挪用装备的效力，由于他只要jscam.swf的1/3
- onTick: function(remain) {}//定时触发，定时照相
- onSave：//症结处所，设置提交数据处置惩罚背景做图象参数设置
- onCapture：//点击照相保留
- onLoad：//插件加载事宜，一般这里排列装备列表
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
onTick: function(remain) {
if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
},
onSave: function(data) {
var col = data.split(";");
// Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
},
onCapture: function () {
webcam.save();
// Show a flash for example
},
debug: function (type, string) {
// Write debug information to console.log() or a div, ...
},
onLoad: function () {
// Page load
var cams = webcam.getCameraList();
for(var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
});
上面的js代码再定义一个<div id=”webcam”></div>，就能够翻开摄像头了，然则要和php交互还要做一些修正
完全demo
下面代码中的解释仅是个人明白，并不是作者原有，仅供参考
html+js
<!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-1.7.2.min.js"></script>
<script src="jquery.webcam.min.js"></script>
<script type="text/javascript">
$(function() {
var pos = 0, ctx = null, saveCB, image = [];
//建立画布指定宽度和高度
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
//假如画布胜利建立
if (canvas.toDataURL) {
//设置画布为2d，将来能够支撑3d
ctx = canvas.getContext("2d");
//截图320*240，即全部画布作为有用区(cutx?)
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
//把data切割为数组
var col = data.split(";");
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);
$.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")});
pos = 0;
}
};
} else {
saveCB = function(data) {
//把数据一点点的放入image[]
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("upload.php", {type: "pixel", image: image.join('|')});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
// /**
// * 猎取canvas画布的内容 getImageData
// * 内容放回到canvas画布 putImageData
// * 猎取ImgData的每一个像素 ImgData.data
// * getImageData(起始点的横坐标, 起始点的纵坐标, 猎取的宽度, 猎取的高度)
// * putImageData(绘制点的横坐标, 绘制点点纵坐标, imgData的起始点横坐标, imgData的起始点纵坐标, 宽度, 高度)
// */
});
</script>
</head>
<body>
<div id="webcam"></div>
<input type="button" onclick="webcam.capture();" value="点击触发" >
</body>
</html>
php背景处置惩罚
背景是触及的是php画图手艺，在php.ini中开启extension=php_gd2.dll，假如是框架开辟，在上面的js中$.post异步给框架【TP】中控制器的某个要领
<?php
//$str = file_get_contents("php://input");
//file_put_contents("upload.jpg", pack("H*", $str));
//var_dump($_POST['image']);
if ($_POST['type'] == "pixel") {
// input is in format 1,2,3...|1,2,3...|...
$im = imagecreatetruecolor(320, 240);
foreach (explode("|", $_POST['image']) as $y => $csv) {
foreach (explode(";", $csv) as $x => $color) {
imagesetpixel($im, $x, $y, $color);
}
}
} else {
// input is in format: data:image/png;base64,...
$im = imagecreatefrompng($_POST['image']);
}
imagepng($im,"circle".time().".png");//保留，指定途径
imagedestroy($im);
// do something with $im源码编译
该插件有个瑕玷就是像素大小不能调解，假如要调解像素大小须要编译
src目录下的源码，我没有亲身测试，供应编译胜利的例子
http://www.cnblogs.com/iasp/p…【jQuery Webcam Plugin jscam.swf文件反编译东西运用说明】
demo下载
原作者本人【https://github.com/infusion/j…】
我本身的demo：
- git下载：https://github.com/mytheshow/…
- 百度云下载：链接：http://pan.baidu.com/s/1hsBqwfE 暗码：u2c2
