EnlightenCode

📸 前端拍照的三种实现方案 ​

在前端开发中，有时我们需要实现拍照功能。本文将介绍三种常用的实现方案，并详细分析它们的优缺点。

📱 方案一：MediaDevices API ​

这是一种较为常用的方案，通过调用设备的媒体设备接口来实现拍照功能。

优点 ✅ ​

  • 兼容性好（主流浏览器都支持）
  • 页面UI完全可自定义
  • 可实现实时预览
  • 支持切换前后摄像头

缺点 ❌ ​

  • 需要 HTTPS 环境（本地开发除外）
  • 无法获取照片的 EXIF 信息
  • 需要用户授权摄像头权限

实现步骤 ​

  1. 检查设备支持
javascript
async function checkCamera() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        return videoDevices.length > 0;
    } catch (err) {
        console.error('检查摄像头失败:', err);
        return false;
    }
}
  1. 配置和启动摄像头
javascript
const startCamera = async () => {
    const constraints = {
        audio: false,
        video: {
            width: { ideal: 1280 },
            height: { ideal: 720 },
            facingMode: "user", // 前置摄像头
            // facingMode: { exact: "environment" } // 强制使用后置摄像头
        }
    };

    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        videoRef.current.srcObject = stream;
        await videoRef.current.play();
    } catch (err) {
        console.error('启动摄像头失败:', err);
    }
}
  1. 实现拍照功能
javascript
const takePhoto = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    // 设置canvas尺寸为视频实际尺寸
    canvas.width = videoRef.current.videoWidth;
    canvas.height = videoRef.current.videoHeight;
    
    // 绘制当前视频帧
    context.drawImage(videoRef.current, 0, 0);
    
    // 转换为图片
    const photo = canvas.toDataURL('image/jpeg', 0.8);
    return photo;
};

📲 方案二：原生 Input 方案 ​

这是最简单的实现方式，利用原生 input 标签唤起设备相机。

优点 ✅ ​

  • 实现简单
  • 可获取 EXIF 信息
  • 使用系统原生相机，体验好

缺点 ❌ ​

  • 仅移动端支持
  • UI 不可自定义
  • PC 端会变成文件选择器

实现代码 ​

html
<!-- 基础用法 -->
<input type="file" accept="image/*" capture="camera" />

<!-- 支持多选的用法 -->
<input type="file" accept="image/*" multiple />

<!-- 仅支持相机拍摄的用法 -->
<input type="file" accept="image/*" capture />

🎥 方案三：ImageCapture API ​

这是一个实验性的新特性，提供了更多高级功能。

优点 ✅ ​

  • 可获取 EXIF 信息
  • 支持更多高级功能（如对焦、曝光等）
  • UI 可自定义

缺点 ❌ ​

  • 浏览器兼容性较差（目前主要 Chrome 支持）
  • API 仍在实验阶段

示例代码 ​

javascript
async function initImageCapture() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        const track = stream.getVideoTracks()[0];
        const imageCapture = new ImageCapture(track);
        
        // 拍照
        const photo = await imageCapture.takePhoto();
        // photo 是 Blob 对象，可以直接上传或转换为其他格式
        
        // 获取帧
        const frame = await imageCapture.grabFrame();
        // frame 是 ImageBitmap 对象
        
    } catch (err) {
        console.error('初始化失败:', err);
    }
}

📝 总结建议 ​

  1. 如果需要完全自定义UI，推荐使用方案一（MediaDevices API）
  2. 如果是简单的移动端应用，使用方案二（原生input）最为便捷
  3. 如果需要专业的相机功能且不考虑兼容性，可以尝试方案三（ImageCapture API）

🚨 注意事项 ​

  • 所有方案在使用前都需要进行兼容性检查
  • 注意处理用户拒绝授权的情况
  • 在移动端要注意内存占用问题
  • 建议在 HTTPS 环境下使用
  • 注意照片的压缩和质量控制