web 摄像头拍照并上传

　　通过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 MacxScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and SafarixScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}var windowWidth, windowHeight;if (self.innerHeight) { // all except Explorerif(document.documentElement.clientWidth){windowWidth = document.documentElement.clientWidth;} else {windowWidth = self.innerWidth;}windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) { // other ExplorerswindowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;}// for small pages with total height less then height of the viewportif(yScroll < windowHeight){pageHeight = windowHeight;} else {pageHeight = yScroll;}// for small pages with total width less then width of the viewportif(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 代码

<?phpdefine('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.';?>

转载于:https://www.cnblogs.com/yucm/p/6042214.html

web 摄像头拍照并上传相关推荐

摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
web调用摄像头拍照并上传到服务器
1.注意事项 1.网页对摄像头调用的限制比较高,要求网页必须https协议或者是要本地localhost(127.0.0.1)否则无法调用, 2.当你的网页协议是https请求的时候你向后端服务器发的 ...
摄像头上传文件服务器失败,vue打开摄像头拍照并上传至服务器
getCompetence() { var _this = this this.thisCancas = document.getElementById('canvasCamera') this.th ...
android 实现自动拍照,android 调用摄像头自动拍照并上传到YEELINK
前几天看到yeelink这个网站很感兴趣,注册了个图像传感器,就想着写个程序调用安卓摄像头并上传照片程序很简单这个还是记录一下首先是权限,分别是联网,相机,文件读取,照相和自动对焦的权限然后是代 ...
flash在线拍照并上传到后台（servlet）
一.flash在线拍照并上传到后台(servlet) 第一步:先新建一个ActionScript文件:ShiBieFunction.as 该文件的核心代码如下: =========使用摄像头获取视频流 ...
web安全之文件上传漏洞攻击与防范方法
一. 文件上传漏洞与WebShell的关系文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...
想说爱你不容易 | 使用最小 WEB API 实现文件上传（Swagger 支持）
前言上回,我们使用最小 WEB API 实现文件上传功能(<想说爱你不容易 | 使用最小 WEB API 实现文件上传>),虽然客户端访问是正常的,但是当打开 Swagger 页面时,发 ...
JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
web安全之文件上传漏洞总结
web安全之文件上传漏洞总结 https://www.cnblogs.com/YGblood/p/10443600.html
Web安全之文件上传漏洞
0x00 漏洞介绍系统管理员都有过系统被上传后门.木马或者是网页被人篡改的经历,这类攻击大部分是通过文件上传来是实现的.文件上传漏洞是指网络攻击者上传了一个可执行文件到服务器并执行.这里上传的文件可 ...

web 摄像头拍照并上传

web 摄像头拍照并上传相关推荐

最新文章

热门文章