js 实现拍照上传

使用HTML5的input元素和File API

在HTML中创建一个<input type="file">元素，并设置accept="image/*"和capture="camera"属性，这样在移动设备上会直接调用相机功能。

<input type="file" id="cameraInput" accept="image/*" capture="camera">

通过JavaScript监听change事件获取图片文件：

document.getElementById('cameraInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        // 处理文件上传
        uploadImage(file);
    }
});

使用Canvas处理图片

如果需要调整图片大小或质量，可以使用Canvas API：

function processImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }
            if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
            }

            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob((blob) => {
                resolve(blob);
            }, 'image/jpeg', quality);
        };
    });
}

上传图片到服务器

使用FormData和fetch API上传图片：

async function uploadImage(file) {
    // 可选：先处理图片
    const processedBlob = await processImage(file, 800, 800, 0.8);

    const formData = new FormData();
    formData.append('image', processedBlob || file, 'photo.jpg');

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        console.log('上传成功:', result);
    } catch (error) {
        console.error('上传失败:', error);
    }
}

使用MediaDevices API直接访问摄像头

对于更高级的控制，可以使用getUserMedia API：

async function captureFromCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        const video = document.createElement('video');
        video.srcObject = stream;
        video.play();

        // 创建拍照按钮
        const button = document.createElement('button');
        button.textContent = '拍照';
        button.onclick = () => {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0);

            canvas.toBlob((blob) => {
                uploadImage(blob);
                stream.getTracks().forEach(track => track.stop());
            }, 'image/jpeg');
        };

        document.body.appendChild(video);
        document.body.appendChild(button);
    } catch (err) {
        console.error('无法访问摄像头:', err);
    }
}

兼容性处理

对于不支持某些API的浏览器，需要提供备用方案：

function isCameraSupported() {
    return (
        (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||
        (navigator.getUserMedia) ||
        (navigator.webkitGetUserMedia) ||
        (navigator.mozGetUserMedia)
    );
}

if (!isCameraSupported()) {
    alert('您的浏览器不支持直接拍照功能，请使用文件上传');
}

移动端优化

在移动设备上，需要考虑横竖屏切换和全屏体验：

function setupMobileCamera() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        document.documentElement.requestFullscreen();
        screen.orientation.lock('portrait').catch(() => {});
    }
}

安全考虑

确保网站使用HTTPS，因为许多摄像头API在非安全环境下不可用：

if (window.location.protocol !== 'https:') {
    console.warn('摄像头功能在非HTTPS环境下可能受限');
}