web 摄像头拍照并上传
2016-11-08 11:07 ycm 阅读(439) 评论(0) 编辑 收藏 举报通过2天的查找资料，终于找到了 摄像头拍照的方法并调试成功；在ie，及火狐等浏览器测试通过。
ie 拍照：
服务端存储照片
现在分享下经验；
1、js控件 jQuery webcam plugin （官网 http://www.xarg.org/project/jquery-webcam-plugin/）
2、按照官网的例子 可以看到 摄像头图形，但无法进行拍照 ，错误提示“webcam.capture” 不是一个函数。
3、然后查找各种问题，最后发现需要 在本地 flash 设置开启 安全设置
4、php 接受图片存储 （就不累赘）
5、最后奉献源码（没有整理）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jQuery webcam plugin • Code is poetry</title><!-- 1478091437 -->
<link rel="icon" type="image/x-icon">
</head>
<body>
<div id="webcam" style="" >
<!-- <object width="218" height="240" data="newSrc/jscam_canvas_only.swf" type="application/x-shockwave-flash" id="XwebcamXobjectX">
<param value="newSrc/jscam_canvas_only.swf" name="movie">
<param value="mode=callback&quality=85" name="FlashVars"><param value="always" name="allowScriptAccess"></object>
<div class="takepic">
<a class="clicktosnap disabled" id="clicktosnap"> Take a picture now! </a>
</div>-->
<a class="clicktosnap disabled" id="clicktosnap"> Take a picture now! </a>
</div>
<canvas width="320" height="240" id="canvas" ></canvas>
<img id="primaryweb" width="220" style="display: none;" height="220" src="http://127.0.0.1/ex/main//upload/copy/">
<p id="status">aa</p>
<script src="newSrc/jquery-1.7.2.js"></script>
<script src="newSrc/jquery.webcam.min.js"></script>
<script>
$(document).ready(function(){
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
var filter_on = false;
var filter_id = 0;
function changeFilter() {
if (filter_on) {
filter_id = (filter_id + 1) & 7;
}
}
function toggleFilter(obj) {
if (filter_on =!filter_on) {
obj.parentNode.style.borderColor = "#c00";
} else {
obj.parentNode.style.borderColor = "#333";
}
}
// alert("waw");
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "newSrc/jscam_canvas_only.swf",
onTick: function(remain) {
if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
},
onSave: function(data) {
var col = data.split(";");
var img = image;
if (false == filter_on) {
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;
}
} else {
var id = filter_id;
var r,g,b;
var r1 = Math.floor(Math.random() * 255);
var r2 = Math.floor(Math.random() * 255);
var r3 = Math.floor(Math.random() * 255);
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
/* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */
if (id == 0) {
r = (tmp >> 16) & 0xff;
g = 0xff;
b = 0xff;
} else if (id == 1) {
r = 0xff;
g = (tmp >> 8) & 0xff;
b = 0xff;
} else if (id == 2) {
r = 0xff;
g = 0xff;
b = tmp & 0xff;
} else if (id == 3) {
r = 0xff ^ ((tmp >> 16) & 0xff);
g = 0xff ^ ((tmp >> 8) & 0xff);
b = 0xff ^ (tmp & 0xff);
} else if (id == 4) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
r = v;
g = v;
b = v;
} else if (id == 5) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
if ((r+= 32) < 0) r = 0;
if ((g+= 32) < 0) g = 0;
if ((b+= 32) < 0) b = 0;
} else if (id == 6) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
if ((r-= 32) < 0) r = 0;
if ((g-= 32) < 0) g = 0;
if ((b-= 32) < 0) b = 0;
} else if (id == 7) {
r = (tmp >> 16) & 0xff;
g = (tmp >> 8) & 0xff;
b = tmp & 0xff;
r = Math.floor(r / 255 * r1);
g = Math.floor(g / 255 * r2);
b = Math.floor(b / 255 * r3);
}
img.data[pos + 0] = r;
img.data[pos + 1] = g;
img.data[pos + 2] = b;
img.data[pos + 3] = 0xff;
pos+= 4;
}
}
if (pos >= 0x4B000) {
ctx.putImageData(img, 0, 0);
pos = 0;
$.post("/uploadPhoto/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
alert("ajaxPhoto");
document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
$('#primaryweb').hide();
$('#canvas').show();
}
},
onCapture: function () {
webcam.save();
jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut(100, function () {
jQuery("#flash").css("opacity", 1);
});
},
//debug: function (type, string) {
// jQuery("#status").html(type + ": " + string);
//console.log(type + ": " + string);
//},
onLoad: function () {
var cams = webcam.getCameraList();
if ((cams.length)>=1)
{
//we are ok enoguh cams
}
else
{
$('#webcam').hide();
$('#filesystem').prop('checked', true);
$( "#filesystem" ).trigger( "click" );
$( "#section-source" ).hide();
}
for(var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
//IF NOT HERE ENABLE CAMERA OTHERWISE DISABLE
}
},
debug: function(type, string) {
console.log(type + ": " + string);
if (string === "Camera started") {
window.webcam.started = true;
if (window.webcam.onStarted) { window.webcam.onStarted(); }
}
if (string === "Camera stopped") {
window.webcam.started = false;
if (window.webcam.onStarted) { window.webcam.onStopped(); }
}
}
});
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth, pageHeight];
}
window.addEventListener("load", function() {
jQuery("body").append("<div id=\"flash\"></div>");
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.src = "/image/logo.gif";
img.onload = function() {
ctx.drawImage(img, 129, 89);
}
image = ctx.getImageData(0, 0, 320, 240);
}
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
window.addEventListener("resize", function() {
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
window.webcam.onStarted = function () {
// alert("Whey, the webcam started");
$('#clicktosnap').removeClass("disabled");
};
window.webcam.onStopped = function () {
// alert("Whey, the webcam started");
$('#webcam').hide();
$('#filesystem').prop('checked', true);
$( "#filesystem" ).trigger( "click" );
$( "#section-source" ).hide();
};
$('#filesystem').click(function(){
var somvar = $("#pic-selector-wrapper").html();
$("#pic-selector-wrapper").show();
$('#webcam').hide();
$('#more-pics').show();
$('.addmorepics .custom-input-file').show();
});
$('#camera').click(function(){
alert("aw");
$('#more-pics').hide();
$("#pic-selector-wrapper").hide();
$('#webcam').show();
$('.addmorepics .custom-input-file').hide();
});
$('#clicktosnap').click(function(){
if ($('#clicktosnap').is('.disabled'))
{
alert ("Please enable the camera first, then press allow on the dialog above.");
}
else
{
webcam.capture();
}
});
});
</script>
</body>
</html>
2.php 代码
<?php
define('UPLOAD_DIR', 'images/');
/*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']);
}*/
$img = $_POST['image'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
