HTML5视频截图需先确保视频已加载且稳定，再将其帧绘制到canvas并导出图片；关键点包括跨域配置、尺寸匹配、时机控制及移动端兼容性处理。

HTML5 视频截图本质是将当前播放的视频帧绘制到 <canvas></canvas> 上，再通过 toDataURL() 或 toBlob() 导出为图片。关键在于时机控制、跨域处理和画布尺寸匹配。

视频帧捕获的核心步骤

必须确保视频已加载并处于可播放状态（loadeddata 或 canplay 事件后），且画面稳定（避免黑帧或未解码帧）。

• 获取视频元素引用：const video = document.getElementById('myVideo');
• 创建画布并设置宽高与视频实际显示尺寸一致（推荐用 video.videoWidth / video.videoHeight）
• 调用 ctx.drawImage(video, 0, 0, canvas.width, canvas.height) 将当前帧绘制到 canvas
• 导出图片：canvas.toDataURL('image/png') 或 canvas.toBlob(blob => { ... }, 'image/jpeg', 0.9)

处理跨域视频资源（如 CDN、远程 MP4）

若视频来自不同源且未开启 CORS，drawImage 会触发 canvas 污染（tainted canvas），导致 toDataURL 报错或返回空字符串。

• 服务端需在视频响应头中添加：Access-Control-Allow-Origin: *（或指定域名）
• 前端视频标签必须设置 crossorigin="anonymous" 属性：<video crossorigin="anonymous"></video>
• 注意：即使设了 crossorigin，若服务端未正确返回 CORS 头，仍会污染画布

保证截图清晰度与尺寸准确性

直接用 video.clientWidth/clientHeight 可能因 CSS 缩放失真；应优先使用原始分辨率或按比例缩放。

立即学习“前端免费学习笔记（深入）”；

• 高清截图建议使用原生分辨率：canvas.width = video.videoWidth; canvas.height = video.videoHeight;
• 若需适配显示区域，手动计算缩放比：const scale = Math.min(video.clientWidth / video.videoWidth, video.clientHeight / video.videoHeight);
• 绘制时传入缩放后的目标尺寸：ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);

实用技巧与常见问题

截图不是“随时点都能截”，需结合视频状态与用户交互设计。

• 避免在 seeking 过程中截图——此时帧可能未就绪，建议监听 seeked 后再执行
• 暂停视频再截图更可靠：video.pause(); drawFrame();，防止动态画面模糊
• 移动端 Safari 对 toBlob 支持较晚，可降级用 toDataURL + 创建临时链接下载
• 频繁截图可复用同一 canvas 和 ctx，无需反复创建，提升性能