使用PHP捕获Javascript网络摄像头并上传到服务器

我有一个页面与成功图像上传表单canvas使用JavaScript和PHP上传文件。 第二页有一个成功的网络摄像头捕获到canvas并正确显示。 我正在尝试使用凸轮捕获来调整图像上传脚本，实时css对象什么也不做…… html是：snap

 
 Upload This Canvas 
 
 
     

和java脚本是：

 //interactioncam.js - grab a pic (function() { var data; var dataURL; var streaming = false, video = document.querySelector('#video'), cover = document.querySelector('#cover'), canvas = document.querySelector('#canvas'), photo = document.querySelector('#photo'), startbutton = document.querySelector('#startbutton'), width = 320, height = 240; navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia( { video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream; } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev){ if (!streaming) { height = video.videoHeight / (video.videoWidth/width); video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); function takepicture() { canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); var dataURL = canvas.toDataURL(); photo.setAttribute('src', data); }; startbutton.addEventListener('click', function(ev){ takepicture(); ev.preventDefault(); }, false); // Convert DataURL to Blob object function dataURLtoBlob(dataURL) { // Decode the dataURL var dataURL = canvas.toDataURL(); var binary = atob(dataURL.split(',')[1]); // Create 8-bit unsigned array var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } // Return our Blob object return new Blob([new Uint8Array(array)], {type: 'image/png'}); } // Send IT $("#upCanvas").live("click", function(){ $("#upCanvas").html("   Uploading .."); // Convert Canvas DataURL var dataURL= canvas.toDataURL(); // Get Our File var file= dataURLtoBlob(dataURL); // Create new form data var fd = new FormData(); // Append our image fd.append("imageNameHere", file); $.ajax({ url: "uploadFile.php", type: "POST", data: fd, processData: false, contentType: false, }).done(function(respond){ $("#upCanvas").html("Upload This Canvas"); $(".return-data").html("Uploaded Canvas image link: "https://stackoverflow.com/questions/21152926/javascript-webcam-capture-and-upload-to-server-with-php/+respond+"").hide().fadeIn("fast"); }); }); })(); 

php上传是：

 <?php $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"]  0) { echo "Return Code: " . $_FILES["file"]["error"] . "
"; } else { echo "Upload: " . $_FILES["file"]["name"] . "
"; echo "Type: " . $_FILES["file"]["type"] . "
"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB
"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "
"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "Stored in: " . "upimg/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; } ?> 

任何建议，为什么我不能将canvas转换为文件和上传脚本工作？

Answer 1

你需要将捕获的图像发布到php ，因为你可以使用jquery .ajax() ，这是一个完整的例子：

upload.php的

现在js / jquery ， css和html ：

 (function() { // The width and height of the captured photo. We will set the // width to the value defined here, but the height will be // calculated based on the aspect ratio of the input stream. var width = 320; // We will scale the photo width to this var height = 0; // This will be computed based on the input stream // |streaming| indicates whether or not we're currently streaming // video from the camera. Obviously, we start at false. var streaming = false; // The various HTML elements we need to configure or control. These // will be set by the startup() function. var video = null; var canvas = null; var photo = null; var startbutton = null; function startup() { video = document.getElementById('video'); canvas = document.getElementById('canvas'); photo = document.getElementById('photo'); startbutton = document.getElementById('startbutton'); navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia({ video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev) { if (!streaming) { height = video.videoHeight / (video.videoWidth / width); // Firefox currently has a bug where the height can't be read from // the video, so we will make assumptions if this happens. if (isNaN(height)) { height = width / (4 / 3); } video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); startbutton.addEventListener('click', function(ev) { takepicture(); ev.preventDefault(); }, false); clearphoto(); } // Fill the photo with an indication that none has been // captured. function clearphoto() { var context = canvas.getContext('2d'); context.fillStyle = "#AAA"; context.fillRect(0, 0, canvas.width, canvas.height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } // Capture a photo by fetching the current contents of the video // and drawing it into a canvas, then converting that to a PNG // format data URL. By drawing it on an offscreen canvas and then // drawing that to the screen, we can change its size and/or apply // other changes before drawing it. function takepicture() { var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); $.ajax({ type: "POST", url: "upload.php", data: { imgBase64: data, imgName: "webcam.png" } }).done(function(o) { console.log('saved'); }); } else { clearphoto(); } } // Set up our event listener to run the startup process // once loading is complete. window.addEventListener('load', startup, false); })(); 

 #video { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #photo { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #canvas { display:none; } .camera { width: 340px; display:inline-block; } .output { width: 340px; display:inline-block; } #startbutton { display:block; position:relative; margin-left:auto; margin-right:auto; bottom:32px; background-color: rgba(0, 150, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2); font-size: 14px; font-family: "Lucida Grande", "Arial", sans-serif; color: rgba(255, 255, 255, 1.0); } .contentarea { font-size: 16px; font-family: "Lucida Grande", "Arial", sans-serif; width: 760px; } 

       
 
  Take photo 
   
  
 
   

Answer 2

FILES上传名称是imageNameHere而不是file 。 要访问数据，您应该将imageNameHere替换为file或更改php代码。 否则上传的dataUrl可能不在base64中？

Answer 3

你可以加 ：

 .canvas{display:block;}