php实现调取摄像头拍摄用户打卡照片的功能

这篇文章给大家分享的是有关php实现调取摄像头拍摄用户打卡照片的功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获。

10年的怀仁网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整怀仁建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“怀仁网站设计”,“怀仁网站推广”以来,每个客户项目都认真落实执行。

需求:

拍照和照片要在同一个位置,拍完以后视频框显示照片,如果想重拍点击激活摄像头按钮,视频框显示,照片隐藏,再点击拍,拍摄成功,点击上传。

调取成功摄像头,如图下会有进度条的视频框显示:

php实现调取摄像头拍摄用户打卡照片的功能

点击拍照,拍摄成功,左边会显示激活摄像头的按钮,其实不点激活摄像头,不满意接着点拍照,是可以拍的,只不过看不到是什么样的,如图:

php实现调取摄像头拍摄用户打卡照片的功能

拍摄完成,点击上传,上传至后台进行数据操作。

样式文件:

.coach-price{display: none}
.input-but{display: inline-flex;}
#canvas{display: none}
#showVideo{display: none}
#input-picture{width:100%;}
HTML代码:
打卡头像
//这是一个画布的容器
//要拍照的视频框
//各种按钮

JS代码:

提交后台,PHP进行处理,用的框架是tp5的,所以后面返回的时候直接用的tp的success和error,很方便,它的第一个参数是msg,第二个是URL,第三个是data。

 public function upPicture(){
        $image_code = input('image_code');
        if(empty($image_code)){
            $this ->error('照片为空');
        }
        $uId = input('userId');
       //处理接收过来的图片
        $img = str_replace('data:image/png;base64,', '', $image_code);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
       // 图片名称
        $file_name = "./uploads/head/".time().".png";
        $fp = fopen($file_name, 'w');
        fwrite($fp, $data);
        fclose($fp);
        $array = array(
            "picture" => substr($file_name,1)
        );
       $res =  Db::table("table")->where("userId",$uId)->setField($array);
       if($res){
           $this ->success('编辑成功!');
       }else{
           $this ->error('编辑失败,请刷新重试!');
       }
    }

以上就是php实现调取摄像头拍摄用户打卡照片的功能,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎关注创新互联行业资讯,感谢各位的阅读。


文章名称:php实现调取摄像头拍摄用户打卡照片的功能
网页路径:http://ybzwz.com/article/pociei.html