HTML5视频截取上传本质是捕获帧→绘制到画布→导出数据→发送服务器四步闭环，需注意兼容性、尺寸匹配、base64/Blob选择及FormData上传规范。
HTML5 视频画面截取与上传，本质是“捕获帧 → 绘制到画布 → 导出数据 → 发送到服务器”四步闭环。整个过程不依赖插件，但需注意浏览器兼容性、尺寸适配和数据格式处理等关键细节。
视频源准备：本地文件或实时流
截取来源有两种常见方式，选择取决于使用场景：
-
本地视频文件：用
<input type="file" accept="video/*">获取用户选择的视频，再通过URL.createObjectURL(file)赋值给<video>的src； -
摄像头实时流：调用
navigator.mediaDevices.getUserMedia({ video: true })获取 MediaStream，直接设为<video>的srcObject（注意现代写法已弃用src=stream）。
无论哪种方式，都建议监听 loadedmetadata 事件，确保 video.videoWidth 和 video.videoHeight 可用后再操作 canvas，避免尺寸异常。
截图核心：Canvas 绘制与帧提取
截图不是“拍照”，而是把当前播放帧“复制”到 canvas 上。关键点在于时机与尺寸匹配：
立即学习“前端免费学习笔记（深入）”；
- 调用
ctx.drawImage(video, 0, 0)即可绘制当前画面，无需指定宽高参数——若 canvas 尺寸未设，默认按 CSS 渲染尺寸绘制，易导致拉伸或裁剪； - 正确做法是先设置
canvas.width = video.videoWidth、canvas.height = video.videoHeight，保证像素级还原； - 若需 JPEG 格式且控制体积，可用
canvas.toDataURL('image/jpeg', 0.8)（第二参数为质量系数，0–1）；PNG 则无压缩，适合保留透明度或文字清晰度。
数据处理：base64 或 Blob 二选一
导出的数据格式影响上传效率和后端解析逻辑：
-
base64 方式：返回形如
data:image/jpeg;base64,xxxx的字符串。前端可截取逗号后部分（data.split(',')[1]），后端用 base64_decode 解码保存；优点是结构简单，缺点是体积膨胀约 33%，不适合大图； -
Blob 方式：用
canvas.toBlob(callback, 'image/jpeg', 0.8)直接生成二进制对象，再包装进 FormData 上传。更高效，推荐用于生产环境；注意 callback 中拿到的 blob 可直接new File([blob], 'snapshot.jpg', {type: 'image/jpeg'})模拟文件对象。
上传实现：FormData + Fetch / XHR
上传本身是标准文件传输流程，但有两个硬性约束必须遵守：
- 必须使用
FormData构造请求体，append('image', fileOrBlob)，其中键名（如image）要与后端接收字段一致； - 调用
fetch时不能手动设置Content-Type，否则浏览器无法自动注入 multipart boundary，导致后端收不到文件； - 如需上传进度，Fetch 不原生支持上传事件，得换用
XMLHttpRequest并监听upload.onprogress； - 服务端常见配置坑：Nginx 默认限制 body 大小（需加
client_max_body_size 100m），Node.js 的 Express 必须用multer替代body-parser处理 multipart 数据。
整个流程技术成熟、浏览器支持良好（Chrome/Firefox/Safari/Edge 均已稳定支持），难点不在代码本身，而在前后端协作细节和边界情况处理。比如视频未加载完成就截图、移动端横竖屏适配、低性能设备频繁截图卡顿等，都需要针对性应对。
