当前位置：首页 > HTML

h5实现拍照

2026-01-16 16:59:30HTML

实现H5拍照功能的方法

H5实现拍照功能主要依赖浏览器的getUserMedia API，结合HTML5的<video>和<canvas>元素完成图像捕获。以下是具体实现步骤：

1. 检查浏览器兼容性 使用navigator.mediaDevices.getUserMedia检测是否支持摄像头访问：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // 支持摄像头访问
} else {
    alert('您的浏览器不支持拍照功能');
}

2. 获取摄像头视频流 通过getUserMedia请求摄像头权限并显示实时画面：

navigator.mediaDevices.getUserMedia({ video: true })
    .then(function(stream) {
        const video = document.getElementById('video');
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.error('摄像头访问失败:', err);
    });

3. 捕获图像并转换为照片 使用canvas从视频流中截取当前帧：

function capturePhoto() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    // 设置canvas尺寸与视频一致
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // 绘制当前视频帧到canvas
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 获取图片数据
    const photoData = canvas.toDataURL('image/png');
    return photoData;
}

4. 处理移动端适配 移动端需添加以下优化：

设置视频元素的playsinline属性避免全屏
添加方向检测适配竖屏拍摄
```
<video id="video" playsinline></video>
```

5. 完整示例代码

h5实现拍照

<!DOCTYPE html>
<html>
<body>
    <video id="video" autoplay playsinline></video>
    <button id="capture">拍照</button>
    <canvas id="canvas"></canvas>
    <img id="photo" alt="拍摄结果">

    <script>
        document.getElementById('capture').addEventListener('click', function() {
            const photoData = capturePhoto();
            document.getElementById('photo').src = photoData;
        });

        function capturePhoto() {
            const video = document.getElementById('video');
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0);
            return canvas.toDataURL('image/png');
        }

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
                .then(function(stream) {
                    const video = document.getElementById('video');
                    video.srcObject = stream;
                })
                .catch(function(err) {
                    console.error(err);
                });
        }
    </script>
</body>
</html>