Fatal编程技术网
  • javascript/
  • Javascript网络摄像头捕获并使用PHP上传到服务器

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

javascript php jquery html canvas

Javascript网络摄像头捕获并使用PHP上传到服务器,javascript,php,jquery,html,canvas,Javascript,Php,Jquery,Html,Canvas,我有一个使用javascript和PHP上传文件成功上传图像的页面。第二个页面已成功将网络摄像头捕获到画布并正确显示。我正在尝试适应与cam捕获的图像上传脚本的活css对象不做任何事情。。。 html是： 断裂 <div id="upContent"> <div class="upload-wrapper"> <span id="upCanvas">Upload This Canvas</span> </

我有一个使用javascript和PHP上传文件成功上传图像的页面。第二个页面已成功将网络摄像头捕获到画布并正确显示。我正在尝试适应与cam捕获的图像上传脚本的活css对象不做任何事情。。。 html是： 断裂 

    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->


上传这个画布
java脚本是：

    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->

//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("<img src='img/load.gif' alt='load'>&nbsp;&nbsp;&nbsp;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: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
    });
  });

})();

//interactioncam.js-抓取一张图片
（功能（）{
var数据；
var-dataURL；
var流=假，
video=document.querySelector（“#video”），
封面=document.querySelector（“#封面”），
canvas=document.querySelector（“#canvas”），
photo=document.querySelector（“#photo”），
startbutton=document.querySelector（“#startbutton”），
宽度=320，
高度=240；
navigator.getMedia=（navigator.getUserMedia | |
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia）；
navigator.getMedia(
{ 
视频：没错，
音频：错误
},
功能（流）{
如果（navigator.mozGetUserMedia）{
video.mozSrcObject=流；
}否则{
var vendorURL=window.URL | | window.webkitURL；
video.src=vendorURL？vendorURL.createObjectURL（流）：流；
}
video.play（）；
},
功能（err）{
log（“发生错误！”+err）；
}
);
video.addEventListener（'canplay'，函数（ev）{
如果（！流）{
高度=video.videoHeight/（video.videoWidth/宽度）；
video.setAttribute（'width'，width）；
video.setAttribute（'height'，height）；
canvas.setAttribute（'width'，width）；
canvas.setAttribute（'height'，height）；
流=真；
}
}，假）；
函数takepicture（）{
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（'2d'）.drawImage（视频，0，0，宽度，高度）；
var data=canvas.toDataURL（'image/png'）；
var dataURL=canvas.toDataURL（）；
photo.setAttribute（'src'，数据）；
};
startbutton.addEventListener（'click'，函数（ev）{
拍摄照片（）；
ev.preventDefault（）；
}，假）；
//将DataURL转换为Blob对象
函数dataURLtoBlob（dataURL）{
//解码数据URL
var dataURL=canvas.toDataURL（）；
var binary=atob（dataURL.split（'，）[1]）；
//创建8位无符号数组
var数组=[]；
对于（var i=0；i
php上传是：

    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->

<?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"] < 20000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    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";
  }
?>
关于为什么我无法将画布转换为文件并使上载脚本正常工作，有什么建议吗？

文件上载名称是
imageNameHere
而不是
文件
。

    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->


要访问数据，您应该将imageNameHere替换为
文件
，或者更改php代码。
否则，上载时的dataUrl可能不在base64中？
您可以添加：


    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->



.canvas{display:block;}



您需要将捕获的图像发布到
php
，为此，您可以使用
jquery
.ajax（）
，下面是一个完整的示例：


    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->


upload.php


    <div id="upContent">
    <div class="upload-wrapper">
      <span id="upCanvas">Upload This Canvas</span>
    </div>
    <div class="return-data"></div>
</div>  

    <script src="js/interactioncam.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--script src="js/holder.js"></script-->



<?php
$img = !empty($_REQUEST['imgBase64']) ? $_REQUEST['imgBase64'] : die("No image was posted");
$imgName = $_REQUEST['imgName'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
//saving
file_put_contents($imgName, $fileData);



#视频{
边框：1px纯黑；
盒影：2件2件3件黑色；
宽度：320px；
高度：240px；
}
#照片{
边框：1px纯黑；
盒影：2件2件3件黑色；
宽度：320px；
高度：240px；
}
#帆布{
显示：无；
}
.照相机{
宽度：340px；
显示：内联块；
}
.产出{
宽度：340px；
显示：内联块；
}
#开始按钮{
显示：块；
位置：相对位置；
左边距：自动；
右边距：自动；
底部：32px；
背景色：rgba（0,150,0,0.5）；
边框：1px实心rgba（255,255,255,0.7）；
盒影：0px 0px 1px 2px rgba（0,0,0,0.2）；
字体大小：14px；
字体系列：“Lucida Grande”，“Arial”，无衬线；
颜色：rgba（255、255、255、1.0）；
}
.内容区{
字体大小：16px；
字体系列：“Lucida Grande”，“Arial”，无衬线；
宽度：760px；
}



视频流不可用。
拍照