PHP+Javascript实现在线拍照与上传功能实例

实现原理与环境准备

在线拍照功能的核心在于前端获取视频流并截取单帧图像，随后将该图像数据传输给后端进行持久化存储。本方案基于 webcam.js 库（依赖 Flash 技术，适用于传统浏览器环境）与 PHP 后端交互。

• 前端依赖：webcam.js，用于控制摄像头及生成拍摄后的图像数据。
• 后端支持：需有权限写入图片存储目录的 PHP 环境。
• 设备要求：用户设备需配备摄像头，且浏览器需支持运行 Flash 插件以兼容该库的工作方式。

前端页面结构与配置

首先创建 HTML 页面主体，定义用于放置摄像组件和展示结果信息的容器。

第1步：构建基础 HTML 布局

在 <body> 中设置两个主要区域：#cam 用于承载摄像控件，#results 用于显示上传状态及预览图。同时添加一个触发按钮。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Javascript+PHP实现在线拍照功能</title>
<!-- 引入 webcam.js 库 -->
<script type="text/javascript" src="webcam.js"></script>
</head>
<body>
<div id="cam">
<input type="button" value="点击这里拍照" class="btn" onclick="take_snapshot()">
</div>
<div id="results"></div>
<!-- 在此处填入后续 JS 代码 -->
</body>
</html>

第2步：初始化 Webcam 组件参数

在页面加载或脚本初始化阶段，配置 webcam 对象的属性，指定后端 API 地址、图像质量及音效开关。

<script language="JavaScript">
// 设置图片上传的 PHP 接口地址
webcam.set_api_url( 'action.php' );
// 设置图像质量 (范围 1-100)
webcam.set_quality( 90 );
// 是否播放快门声音
webcam.set_shutter_sound( true );
// 渲染摄像组件到 #cam 容器：宽度320, 高度240，输出缩略图宽160，高120
document.write( webcam.get_html(320, 240, 160, 120) );
</script>

前端交互逻辑实现

当用户点击“拍照”按钮时，需执行快照捕获并处理后端返回的结果。

第3步：编写抓拍与回调函数

注册 onComplete 钩子，定义 take_snapshot() 触发抓取动作，以及 my_completion_handler() 解析返回的图片 URL 并更新界面。

<script language="JavaScript">
// 绑定完成后的回调函数
webcam.set_hook( 'onComplete', 'my_completion_handler' );

function take_snapshot() {
    // 提示用户上传中
    document.getElementById('results').innerHTML = '<h4>Uploading...</h4>';
    // 执行快照截取，数据会自动发送至 set_api_url 指定的 PHP 接口
    webcam.snap();
}

function my_completion_handler(msg) {
    // 从返回消息中提取图片URL
    if (msg.match(/(http\:\/\/\S+)/)) {
        var image_url = RegExp.$1;
        // 显示成功信息及预览图
        document.getElementById('results').innerHTML =
            '<h4>Upload Successful!</h4>' +
            '<img src="' + image_url + '">';
        // 重置摄像头状态以便再次拍摄
        webcam.reset();
    } else {
        alert("PHP Error: " + msg);
    }
}
</script>

后端处理逻辑 (PHP)

后端脚本 action.php 负责接收前端发送的二进制图像数据，将其保存为文件，并将可访问的 URL 返回给前端。

第4步：实现图片保存与路径返回

确保 pics/ 目录存在且具有写入权限。PHP 通过 php://input 读取原始 POST 数据，避免依赖全局数组，更加安全高效。

<?php
// 生成唯一文件名：年月日时分秒.jpg
$filename = date('YmdHis') . '.jpg';
$image_dir = 'pics/';

// 构造完整保存路径
$save_path = $image_dir . $filename;

// 读取输入流并写入文件
$result = file_put_contents($save_path, file_get_contents('php://input'));

if (!$result) {
    echo "ERROR: Failed to write data to $save_path, check permissions\n";
    exit();
}

// 构建前端可访问的 URL
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/pics/' . $filename;

// 输出 URL 供前端提取
echo "$url\n";
?>

注意事项与总结

本实例展示了基础的在线拍照流程，实际生产中建议考虑以下优化点：

• 权限管理：确保服务器上存放图片的目录具有正确的读写权限，但对外部不可直接遍历。
• 格式验证：后端应校验文件头，防止恶意文件注入。
• 现代替代方案：由于 Flash 逐渐淘汰，生产环境建议迁移至 <video> + Canvas 实现的纯 HTML5 拍照方案，无需额外插件即可在现代浏览器中运行。

以上就是PHP+Javascript实现在线拍照功能的详细内容，更多关于PHP Javascript在线拍照上传图片的资料请关注本站其它相关文章！