HTML5调用摄像头拍照上传：getUserMedia+FileReader+Ajax实践

脚本专家

在现代Web应用中，利用HTML5直接调用本地摄像头拍照并上传，已成为用户认证、资料录入等功能的标配。本文以实战为导向，完整实现从获取视频流、拍照截取、预览到Ajax上传的整个流程，代码可直接复用。

一、技术路线概述
整体流程分为四步：
1. 通过navigator.mediaDevices.getUserMedia请求摄像头视频流，并绑定到video元素实现实时显示。
2. 使用canvas元素截取video当前帧作为照片。
3. 利用FileReader API将照片转为DataURL进行预览，或作为上传数据。
4. 通过XMLHttpRequest构造FormData上传图片至服务器。

二、获取摄像头视频流
首先在页面放置video元素用于预览：

2. <video id="video" width="640" height="480" autoplay></video>

复制代码

调用getUserMedia请求摄像头权限，成功后将流赋值给video.srcObject：

2. navigator.mediaDevices.getUserMedia({ video: true })
3.   .then(function(stream) {
4.     var video = document.getElementById('video');
5.     video.srcObject = stream;
6.   })
7.   .catch(function(err) {
8.     console.log(err.name + ': ' + err.message);
9.   });

复制代码

注意：getUserMedia必须在安全上下文（HTTPS或localhost）下运行，且需用户明确授权。

三、拍照：canvas截取帧
在需要拍照时，使用canvas获取video当前画面并保存为图片数据。添加canvas元素（可隐藏）：

2. <canvas id="canvas" width="640" height="480" style="display:none"></canvas>

复制代码

拍照逻辑：

2. function takePhoto() {
3.   var video = document.getElementById('video');
4.   var canvas = document.getElementById('canvas');
5.   var ctx = canvas.getContext('2d');
6.   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
7.   var dataURL = canvas.toDataURL('image/png');
8.   // dataURL可直接用于预览或上传
9.   showPreview(dataURL);
10. }

复制代码

canvas.toDataURL默认输出PNG格式，也可以指定为'image/jpeg'并传入质量参数。

四、照片预览与文件选择
4.1 使用FileReader预览本地图片
如果用户选择从相册上传，可借助input[type=file]和FileReader实现即时预览：

2. <input type="file" id="fileInput" accept="image/*">

复制代码

2. document.getElementById('fileInput').addEventListener('change', function(e) {
3.   var file = e.target.files[0];
4.   if (!file) return;
5.   var reader = new FileReader();
6.   reader.onload = function(e) {
7.     var img = document.createElement('img');
8.     img.src = e.target.result;
9.     document.body.appendChild(img);
10.   };
11.   reader.readAsDataURL(file);
12. });

复制代码

FileReader的readAsDataURL方法将文件转为Base64编码的DataURL，便于显示或上传。

4.2 capture属性直接调用摄像头
HTML5的capture属性可让input[type=file]优先使用设备摄像头：

2. <input type="file" accept="image/*" capture>

复制代码

在支持的移动设备上，点击会直接打开相机拍照，返回的file对象同样可通过FileReader预览。

五、实时预览优化
若需要持续展示摄像头画面（如自拍或扫码），可借助requestAnimationFrame高效绘制canvas：

2. var video = document.getElementById('video');
3. var canvas = document.getElementById('canvas');
4. var ctx = canvas.getContext('2d');
6. function drawVideo() {
7.   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
8.   requestAnimationFrame(drawVideo);
9. }
11. navigator.mediaDevices.getUserMedia({ video: true })
12.   .then(function(stream) {
13.     video.srcObject = stream;
14.     video.play();
15.     drawVideo();
16.   });

复制代码

使用requestAnimationFrame替代setInterval可显著降低CPU消耗，并保证60fps的平滑渲染。

六、Ajax上传图片
将拍照或选择的图片转换为Blob后，通过FormData和XMLHttpRequest异步上传至服务器。

6.1 从DataURL或Blob生成上传数据
- 若已有Blob（如input[type=file]的file对象），直接追加：

2. var formData = new FormData();
3. formData.append('image', file);

复制代码

- 若只有DataURL（来自canvas截图），需先转换为Blob：

2. function dataURLtoBlob(dataURL) {
3.   var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1];
4.   var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
5.   while (n--) u8arr[n] = bstr.charCodeAt(n);
6.   return new Blob([u8arr], {type: mime});
7. }

复制代码

然后构造FormData：

2. var blob = dataURLtoBlob(canvas.toDataURL('image/jpeg', 0.9));
3. formData.append('image', blob, 'photo.jpg');

复制代码

6.2 发送Ajax请求

2. function uploadImage(formData) {
3.   var xhr = new XMLHttpRequest();
4.   xhr.open('POST', '/upload', true);
5.   xhr.onload = function() {
6.     if (xhr.status === 200) {
7.       console.log('上传成功', xhr.responseText);
8.     } else {
9.       console.error('上传失败:', xhr.statusText);
10.     }
11.   };
12.   xhr.upload.onprogress = function(e) {
13.     if (e.lengthComputable) {
14.       var percent = (e.loaded / e.total * 100).toFixed(2);
15.       console.log('上传进度:', percent + '%');
16.     }
17.   };
18.   xhr.onerror = function() {
19.     console.error('网络异常');
20.   };
21.   xhr.send(formData);
22. }

复制代码

6.3 重试机制
可封装重试逻辑，在失败时自动重试指定次数：

2. function uploadWithRetry(formData, retries = 3) {
3.   return new Promise((resolve, reject) => {
4.     function attempt() {
5.       var xhr = new XMLHttpRequest();
6.       xhr.open('POST', '/upload', true);
7.       xhr.onload = function() {
8.         if (xhr.status === 200) resolve(xhr.responseText);
9.         else reject(new Error('HTTP ' + xhr.status));
10.       };
11.       xhr.onerror = function() {
12.         if (retries > 0) {
13.           retries--;
14.           setTimeout(attempt, 1000);
15.         } else {
16.           reject(new Error('重试耗尽'));
17.         }
18.       };
19.       xhr.send(formData);
20.     }
21.     attempt();
22.   });
23. }

复制代码

七、兼容性与注意事项
- getUserMedia需要HTTPS协议（localhost例外）。
- capture属性在桌面端浏览器通常被忽略，建议提供备用文件选择。
- 移动端iOS Safari对MediaRecorder支持有限，推荐使用canvas截图方案。
- 上传前可在客户端对图片进行压缩（缩小canvas尺寸或降低JPEG质量），减小带宽消耗。
- 服务器端需接收multipart/form-data并处理文件存储，这里不再展开。

通过以上步骤，你已经拥有一个完整可用的HTML5拍照上传组件，可根据项目需求灵活调整UI和交互逻辑。

热心网友4

感谢楼主的详细教程，代码结构清晰，从获取流到上传的每个环节都写得很明白。特别是 `requestAnimationFrame` 代替 `setInterval` 来优化预览性能的点，确实很实用。另外 `dataURLtoBlob` 转换那段也解决了很多人上传时数据格式不匹配的问题。我有个小疑问：如果用户想在前端直接压缩图片尺寸再上传，楼主是否建议在 canvas 截取时直接调整宽高？期待后续能补充一下这方面的思路。