js调起摄像头拍照,php存入的数据库

2020-12-07  本文已影响0人  风度翩翩的程序猿

简单来说就是,人脸采集的时候,相比大部分人来说高考,中考,成人高考,学校采集信息的时候,你要在电脑面前拍照。
html+js代码

<td valign="middle" class="text-center">
    <video id="video"style="width:150px;height:200px; border:solid thin #EEE;" autoplay="autoplay"></video>
  </td>
  <td valign="middle" class="text-center">
     <canvas id="canvas" width="640" height="480" hidden style="width:150px;height:200px; border:solid thin #EEE;"></canvas>
    <img id="imgview" scr="" width="640" height="480" style="width:150px;height:200px; border:solid thin #EEE;">
    </td>

<td rowspan="2" class="text-center" style="vertical-align:middle !important;">
          <div id="qd" onclick="camera()" class="btn btn-primary btn-sm">
              <i class="fa fa-camera"  id="camera" aria-hidden="true"></i> 拍摄照片
          </div>
         <div id="cjzp" onclick="queren()" class="btn btn-success btn-sm">
             <i class="fa fa-upload" aria-hidden="true"></i> 确认采集
             </div> 
</td>

<script>
    let constraints = {
        video: {
            width: 480,
            height: 640
        },
        // audio: true
    };
    //获得video摄像头区域
    let video = document.getElementById("video");

    // 这里介绍新的方法,返回一个 Promise对象
    // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
    // then()是Promise对象里的方法
    // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序

    // 避免数据没有获取到
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    // 成功调用
    promise.then(function (MediaStream) {
        /* 使用这个MediaStream */
        video.srcObject = MediaStream;
        video.play();
        // console.log(MediaStream); // 对象
    });
    // 失败调用
    promise.catch(function (err) {
        /* 处理error */
        console.log(err); // 拒签
    });

    function camera(){
        var number = $('#number').text();
        if(number == ''){
            alert('该人员不存在');
            return ;
        }
        //获得Canvas对象
        let video = document.getElementById("video");
        let canvas = document.getElementById("canvas");
        canvas.getContext('2d').drawImage(video, 0, 0, 640, 480);
        let photo = canvas.toDataURL("image/jpeg");
        $('#imgview').attr('src',photo)
    }

    function queren() {
        var photo = $('#imgview').attr('src')
        var number = $('#number').text();
        if(number == ''){
            alert('该人员不存在');
            return ;
        }
        $.post('<?= site_url($folder . '/photograph/caiji')?>',{photo:photo,number:number},function (re) {
            if(re == 1){
                alert('采集成功');
            }
        });
    }
</script>

上面的这些代码就是调起摄像头,并且拍照,拍照形成的类型是base64,需要后端处理
php代码

  public function caiji(){
        $post = $this->input->post();
        // base64转url
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $post['photo'], $result)){
            $type = $result[2];
            $session_id = session_id();
            $file_name = $session_id . '-' . time();
            $targetFolder = $this->create_dir('img');
            $targetFile = $file_name . '.' . $type;//文件全名
            $targetThumbFile = $file_name . '_thumb' . '.' . $type;
            $targetPath = $targetFolder . $targetFile;//文件路径
            if (file_put_contents($targetPath, base64_decode(str_replace($result[1], '', $post['photo'])))){
                // $targetPath 路径
                // 修改照片
                $this->db->update('faceos_user',array('face_info'=>$targetPath),array('number'=>$post['number']));
                echo 1;
            }else{
                echo false;
            }
        }else{
            return false;
        }
    }


    //创建上传目录
    public function create_dir($module = 'img')
    {
        $root_dir = ('./upload');
        $module_dir = $root_dir . '/' . $module;
        $year_dir = $module_dir . '/' . date('Y', time());

        $month_dir = $year_dir . '/' . date('m', time());
        $day_dir = $month_dir . '/' . date('d', time());
        if (!is_dir($root_dir)) {
            mkdir($root_dir);
        }
        if (!is_dir($module_dir)) {
            mkdir($module_dir);
        }
        if (!is_dir($year_dir)) {
            mkdir($year_dir);
        }
        if (!is_dir($month_dir)) {
            mkdir($month_dir);
        }
        if (!is_dir($day_dir)) {
            mkdir($day_dir);
        }
        return $day_dir . '/';
    }

这些代码仅供参考,因为每个框架的代码都不一样,这个是CI3

上一篇下一篇

猜你喜欢

热点阅读