菜鸟-创作你的创作

HTML5实现本地摄像头拍照与照片上传的方法

lichongyang

下面给你整理一份 HTML5 使用本地摄像头拍照并上传照片的方法，包含完整示例和详细说明，适合网页前端直接使用。

1️⃣ 使用 HTML5 获取摄像头

HTML5 提供 MediaDevices.getUserMedia() 接口，可以访问用户摄像头和麦克风。

<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
<img id="photo" alt="拍摄的照片">

2️⃣ JavaScript 拍照逻辑

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');
const snap = document.getElementById('snap');

// 访问摄像头
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
        video.srcObject = stream;
        video.play();
    })
    .catch(err => {
        console.error("无法访问摄像头: ", err);
    });

// 拍照
snap.addEventListener('click', () => {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    // 将 canvas 转成图片显示
    const dataURL = canvas.toDataURL('image/png');
    photo.src = dataURL;
});

3️⃣ 将照片上传到服务器

假设有服务器接口 upload.php 接收 Base64 或文件。

function uploadPhoto() {
    const dataURL = canvas.toDataURL('image/png');

    fetch('upload.php', {
        method: 'POST',
        body: JSON.stringify({ image: dataURL }),
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
        alert('上传成功');
    })
    .catch(err => {
        console.error('上传失败:', err);
    });
}

const uploadBtn = document.createElement('button');
uploadBtn.textContent = '上传照片';
document.body.appendChild(uploadBtn);

uploadBtn.addEventListener('click', uploadPhoto);

4️⃣ 完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 摄像头拍照示例</title>
</head>
<body>

<h2>HTML5 摄像头拍照与上传示例</h2>

<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
<img id="photo" alt="拍摄的照片">

<button id="upload">上传照片</button>

<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');
const snap = document.getElementById('snap');
const uploadBtn = document.getElementById('upload');

// 获取摄像头
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => { video.srcObject = stream; video.play(); })
    .catch(err => { console.error("无法访问摄像头: ", err); });

// 拍照
snap.addEventListener('click', () => {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    photo.src = canvas.toDataURL('image/png');
});

// 上传照片
uploadBtn.addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    fetch('upload.php', {
        method: 'POST',
        body: JSON.stringify({ image: dataURL }),
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => { alert('上传成功'); console.log(data); })
    .catch(err => { alert('上传失败'); console.error(err); });
});
</script>

</body>
</html>

5️⃣ 注意事项

  1. 浏览器兼容
    • Chrome、Firefox、Edge 支持
    • iOS Safari 13+ 支持
    • 必须 HTTPS 才能访问摄像头
  2. 权限问题
    • 用户需要允许摄像头访问
    • 可以捕获异常处理 catch
  3. 上传优化
    • 可以将 Base64 转成 Blob，提高上传效率
    • 服务器需解码保存图片
退出移动版