从网络摄像头捕获图像并存储在 php 中的数据库中

Question

我有一个捕捉图像的闪存代码。这是代码：

<object id="main" width="300" height="400" align="middle" type="application/x-shockwave-flash" name="main" data="<?php echo JS_PATH;?>bin-debug/dev.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="allowscriptaccess" value="sameDomain">
    <param name="allowfullscreen" value="true">
    <param name="flashvars" value="<?php echo HTTP_PATH.DS?>user/changeprofilepic_byweb">
</object>

在上面的代码中：

 <param name="flashvars" value="<?php echo HTTP_PATH.DS?>user/changeprofilepic_byweb">

value 参数包含控制器的路径，其中函数 changeprofielpic_byweb 包含更新配置文件图像的代码。我无法更新图像。我哪里错了？我的闪存代码是正确的吗？我的闪存代码工作正常，它可以捕获图像，但它没有存储到数据库中。这是控制器的代码：

 function changeprofilepic_byweb() 
    {
         echo "<script> alert('In to the function'); </script>";
        $sess_data = $this->session->userdata('logged_in');
        $this->load->library('photoslibrary');
        $this->load->Model('usersocialprofile');
        $upload_path = COMM_USER_IMAGE_PATH.$sess_data['user_id']; 

        if(!is_dir($upload_path)) 
        {
            umask(0);
            @mkdir($upload_path,077);
        }

        $db_userprofile = $this->usersocialprofile->getThumb($sess_data['user_id']);


        if(is_file(COMM_USER_IMAGE_PATH.$sess_data['user_id'].DS.$db_userprofile[0]->imageTitle)) 
        {
            $this->usersocialprofile->unlinkImage($db_userprofile[0],PROFILE_IMAGE_THUMB);

        }

        $this->load->helper("Image");
        $fileImage="";
        $data['error']="";


        $fileext='jpeg';    
        $timestamp=md5(time());
        $filename="photo".$timestamp.".".$fileext;

        $filesize = floatval((filesize($filename)/1024)/1024); // bytes to MB  
        list($width, $height, $type, $attr) = getimagesize($filename);

        $req_size=explode(",",PROFILE_IMAGE_THUMB);
        $req_size=explode("x",$req_size[0]);

        if($width<$req_size[0] || $height<$req_size[1])
        {
            $data['error']="Image required minimum ".$req_size[0]."x".$req_size[1]." pixels";
        }else {

            $data['error']="";
            $newthumb_path = "thumb".DS;

        if(!is_dir($newthumb_path))  {
            umask(0);
            @mkdir($newthumb_path,0777);
        }                

        $fileImage=imageresize($filename,$filetempname,PROFILE_IMAGE_THUMB,$upload_path.DS,false,true,true,$newthumb_path);
        $result=$this->usersocialprofile->updateImage($sess_data['user_id'] , $fileImage);
        }
    }

我认为该函数不是由 flash 代码调用的。我没有收到任何错误。只是显示捕获的图像，但文件夹中没有更新。

Answer 1

下面的答案是展示如何启用用户媒体捕获图像并存储到数据库中。

注意：当在画布上绘制图像时，在此代码中它始终处于 base64 扩展名中，我将使用 php 将 base 64 转换为图像并同时将其存储在数据库中将其存储在我的图像目录中。

Javascript 代码

//define DOMelements
cameraBtn = document.getElementById('camera');
floatPage1 = document.getElementById('floatPage1');
innerPage = document.getElementById('innerPage');
canvas = document.getElementById('canvasVideo');
//closing webcam
closeBtn = document.getElementById('closeBtn');

captureBtn = document.querySelector('.captureBtn');

navigator.getUserMedia = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia;

//code below
//adEvents to the buttonclicked....
cameraBtn.addEventListener("click",buttonclickTrigger,true);
closeBtn.addEventListener("click",closeStream,true);
////////////////////////////////////////////////////////////////////////////
function buttonclickTrigger(){
  floatPage1.style.display = "block";
  innerPage.style.display = "block";
  canvas.style.display = "block";
  navigator.getUserMedia({video:
        {height:canvas.height,width:canvas.width}},function(stream){
        videoStream = stream;
        video = document.createElement("video");
        video.src= window.URL.createObjectURL(videoStream);
        video.onloadedmetadata = function(){
        $this = this;
            function canvasPlay(){
                if(!this.paused && !this.ended){
                    cSrc = canvas.getContext("2d");
                    canvasVideo = cSrc.drawImage(video,0,0);
                   }
            }
            setInterval(canvasPlay,1000/30);
            //capture image from the canvas code.....
            captureBtn.onclick = function(){
                canvas.getContext("2d").drawImage(video,0,0);
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                image = image.src;
                console.log(stream.getTracks()[0]);
                mediaUsed = stream.getTracks()[0].label;
                imageUniqueId = stream.getTracks()[0].id;
                $.ajax({
                    url:"imagesave.php",
                    method:"POST",
                    data:{image:image,mediaUsed:mediaUsed},
                    dataType:"html",
                    success:function(data){
                        alert(data);
                    } 
                });
            }
        }
    },function(err){
        alert(err);
    });
 }

php 代码

<?php
define ("UPLOAD_DIR","../images/");
$imageName = $_POST["image"];
$mediaUsed = $_POST["mediaUsed"];
$imageCreate = explode(";base64,",$imageName);
$image_type_aux = explode("image/", $imageCreate[0]);
$valadid_extension = $image_type_aux[1];
$convertimage = base64_decode($imageCreate[1]);
#generate random id for the image and append them.
$time = time();
$random= "circlestudio_".md5($time);
$image = UPLOAD_DIR.$random."_".uniqid() . '.png';
$fullImage = file_put_contents($image,$convertimage);

move_uploaded_file($fullImage);
$imagesplit = explode(UPLOAD_DIR,$image);
$canvas_imageFullName = $imagesplit[1];
echo $image;
?>

Answer 2

要使用网络摄像头上传图像，您只需创建图像并获取设置为 Flash 代码的变量值。在获取图像时，您只需创建使用的图像任何 get 或 post 方法。类似的东西：

    $fileext='jpeg';    
    $timestamp=md5(time());
    $filename="photo".$timestamp.".".$fileext;