js 实现拍照上传

2026-01-30 12:07:54JavaScript

使用HTML5和JavaScript实现拍照上传功能

在网页中实现拍照上传功能，主要依赖HTML5的<input type="file">元素和capture属性，结合JavaScript处理图像数据。

HTML部分

<input type="file" id="cameraInput" accept="image/*" capture="camera">
<button id="uploadBtn">上传照片</button>
<img id="preview" style="max-width: 300px; display: none;">

JavaScript部分

const cameraInput = document.getElementById('cameraInput');
const uploadBtn = document.getElementById('uploadBtn');
const preview = document.getElementById('preview');

// 监听文件选择变化
cameraInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            preview.src = event.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});

// 上传逻辑
uploadBtn.addEventListener('click', function() {
    if (!cameraInput.files[0]) {
        alert('请先拍照');
        return;
    }

    const formData = new FormData();
    formData.append('image', cameraInput.files[0]);

    fetch('your-upload-endpoint', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
        alert('照片上传成功');
    })
    .catch(error => {
        console.error('上传失败:', error);
        alert('照片上传失败');
    });
});

使用MediaDevices API实现更灵活的拍照控制

如果需要更精细的控制相机参数，可以使用MediaDevices API：

const video = document.createElement('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;
        video.play();
    } catch (err) {
        console.error("无法访问相机:", err);
    }
}

function takePhoto() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 转换为Blob对象用于上传
    canvas.toBlob(blob => {
        const file = new File([blob], 'photo.jpg', { type: 'image/jpeg' });

        const formData = new FormData();
        formData.append('image', file);

        // 上传逻辑同上
    }, 'image/jpeg', 0.9);
}

移动端适配注意事项

在移动设备上实现拍照上传时，需要考虑以下因素：

确保网站使用HTTPS协议，现代浏览器要求安全上下文才能访问相机
添加适当的用户权限请求处理
考虑不同设备的摄像头分辨率差异
添加加载状态指示器，因为移动设备处理大图像可能需要时间

图片压缩处理

上传前对图片进行压缩可以节省带宽和提高用户体验：

function compressImage(file, quality = 0.7) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (event) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                canvas.toBlob(resolve, 'image/jpeg', quality);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    });
}

// 使用示例
compressImage(cameraInput.files[0])
    .then(compressedBlob => {
        // 上传压缩后的图片
    });

错误处理和兼容性检查

实现完整的错误处理逻辑：

// 检查浏览器是否支持所需API
if (!('mediaDevices' in navigator) || !('getUserMedia' in navigator.mediaDevices)) {
    alert('您的浏览器不支持相机访问');
}

// 处理相机访问被拒绝的情况
navigator.mediaDevices.getUserMedia({ video: true })
    .catch(err => {
        if (err.name === 'NotAllowedError') {
            alert('请允许相机访问权限');
        } else {
            console.error('相机错误:', err);
        }
    });

以上代码提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。

js 实现拍照上传