這篇文章給大家分享的是有關(guān)php實(shí)現(xiàn)調(diào)取攝像頭拍攝用戶打卡照片的功能，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲。

10年的懷仁網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整懷仁建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“懷仁網(wǎng)站設(shè)計(jì)”,“懷仁網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

需求：

拍照和照片要在同一個(gè)位置，拍完以后視頻框顯示照片，如果想重拍點(diǎn)擊激活攝像頭按鈕，視頻框顯示，照片隱藏，再點(diǎn)擊拍，拍攝成功，點(diǎn)擊上傳。

調(diào)取成功攝像頭，如圖下會(huì)有進(jìn)度條的視頻框顯示：

點(diǎn)擊拍照，拍攝成功，左邊會(huì)顯示激活攝像頭的按鈕，其實(shí)不點(diǎn)激活攝像頭，不滿意接著點(diǎn)拍照，是可以拍的，只不過(guò)看不到是什么樣的，如圖：

拍攝完成，點(diǎn)擊上傳，上傳至后臺(tái)進(jìn)行數(shù)據(jù)操作。

樣式文件：

.coach-price{display: none}
.input-but{display: inline-flex;}
#canvas{display: none}
#showVideo{display: none}
#input-picture{width:100%;}
HTML代碼：

    

        
打卡頭像
    
    

        

            

                

                    
                    
                    //這是一個(gè)畫(huà)布的容器
                    
                
            
            

                 //要拍照的視頻框
                
            
            

               //各種按鈕
                

                    
                        激活攝像頭
                    
                    
                        拍照
                    
                    
                        上傳
                    
                
            
        
    

JS代碼：

提交后臺(tái)，PHP進(jìn)行處理，用的框架是tp5的，所以后面返回的時(shí)候直接用的tp的success和error，很方便，它的第一個(gè)參數(shù)是msg,第二個(gè)是URL，第三個(gè)是data。

 public function upPicture(){
        $image_code = input('image_code');
        if(empty($image_code)){
            $this ->error('照片為空');
        }
        $uId = input('userId');
       //處理接收過(guò)來(lái)的圖片
        $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('編輯失敗，請(qǐng)刷新重試！');
       }
    }

以上就是php實(shí)現(xiàn)調(diào)取攝像頭拍攝用戶打卡照片的功能，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊，感謝各位的閱讀。