PHP + JavaScript 實現線上拍照上傳功能完整指南

駕校人臉采集、考試現場拍照、會員系統頭像上傳等場景常需要線上拍照功能。本文基於 Webcam.js 庫，詳細講解前後端配合實現拍照、預覽、上傳的完整流程。

技術架構

• 前端：Webcam.js (Flash/WebRTC 兼容) + jQuery
• 後端：PHP 接收二進制流存儲
• 前提：用戶設備有攝像頭，瀏覽器支持 Flash 或 WebRTC

前端頁面結構

<div id="cam">
    <!-- 攝像頭預覽區域 -->
    <input type="button" value="點擊拍照" class="btn" onclick="take_snapshot()">
</div>
<div id="results">
    <!-- 上傳結果顯示區域 -->
</div>

JavaScript 核心邏輯

// 載入 Webcam.js
<script src="webcam.js"></script>

<script>
// 初始化配置
webcam.set_api_url('action.php');        // 上傳接口
webcam.set_quality(90);                  // 圖片質量 1-100
webcam.set_shutter_sound(true);          // 快門聲音
document.write(webcam.get_html(320, 240, 160, 120)); // 輸出攝像頭組件

// 回調處理
webcam.set_hook('onComplete', 'my_completion_handler');

function take_snapshot() {
    document.getElementById('results').innerHTML = '<h4>上傳中...</h4>';
    webcam.snap(); // 觸發拍照上傳
}

function my_completion_handler(msg) {
    if (msg.match(/(http\:\/\/\S+)/)) {
        var image_url = RegExp.$1;
        document.getElementById('results').innerHTML = 
            '<h4>上傳成功!</h4>' + '<img src="' + image_url + '">';
        webcam.reset(); // 重置攝像頭
    } else {
        alert("PHP 錯誤: " + msg);
    }
}
</script>

PHP 後端處理

<?php
// action.php
$filename = date('YmdHis') . '.jpg';
$input = file_get_contents('php://input'); // 獲取原始 POST 數據

// 確保目錄可寫
$dir = 'pics/';
if (!is_dir($dir)) mkdir($dir, 0755, true);

$result = file_put_contents($dir . $filename, $input);

if (!$result) {
    die("ERROR: 寫入失敗，請檢查權限: $filename");
}

// 返回可訪問 URL
$url = 'https://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . "/pics/$filename";
echo $url;

關鍵技術點

進階擴展方向

1. 圖片裁剪：整合 Cropper.js 實現拍照後裁剪
2. 多規格生成：上傳後自動生成縮圖、中圖、原圖
3. 人臉檢測：結合 OpenCV 或 Face-api.js 驗證人臉質量
4. WebRTC 替代：現代瀏覽器棄用 Flash，遷移到 getUserMedia API

安全性注意

• 驗證文件類型：檢查二進制頭部而非擴展名
• 限制上傳大小：Nginx/Apache + PHP 雙重限制
• 存儲路徑非 Web 可訪問或經過簽名 URL 訪問
• 定期清理臨時文件防止佔用磁盤

這套方案快速落地，適合原型驗證及中小型項目直接使用。