HTML5视频截图本质是将当前播放帧绘制到canvas并导出图片；关键需过时机（监听loadeddata/canplay）、尺寸（用video.videoWidth/Height设canvas）、跨域（video加crossorigin="anonymous"且服务端配CORS）三关。
HTML5 视频截图功能本质是把正在播放的视频帧“抓取”下来，转成静态图片。它不依赖插件，纯前端实现，核心就是 <video> 和 <canvas> 的配合使用——视频提供像素源，Canvas 负责绘制与导出。
关键实现步骤
真正能用起来的截图，不是调个 API 就完事，得过三关：时机、尺寸、跨域。
-
等视频准备好再动手：必须监听
loadeddata或canplay事件，确保视频元数据已加载、首帧可解码。在播放中途或未就绪时调用drawImage，很可能截到黑屏或空白。 -
画布尺寸要对得上原始分辨率：用
video.videoWidth和video.videoHeight设置 canvas 宽高，而不是clientWidth/clientHeight。后者受 CSS 缩放影响，会导致模糊或拉伸。 -
远程视频必须处理跨域：如果视频来自 CDN 或其他域名，
<video crossorigin="anonymous">是必需的；服务端也得返回Access-Control-Allow-Origin头，否则画布会被污染，toDataURL()返回空字符串或报错。
高清截图与缩放适配
用户常希望截图既清晰又适配页面布局，这就需要区分两种场景：
-
原图存档用：直接设
canvas.width = video.videoWidth，canvas.height = video.videoHeight，然后ctx.drawImage(video, 0, 0)。这样保留全部细节，适合封面提取、帧分析。 -
展示或预览用：先算缩放比
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)。避免失真，也节省内存。
常用导出方式与性能优化
截图后怎么用，决定了导出策略：
立即学习“前端免费学习笔记（深入）”；
-
快速预览：用
canvas.toDataURL('image/png')得到 base64 字符串，直接赋给<img src="...">即可显示。 -
上传或保存：优先用
canvas.toBlob(callback, 'image/jpeg', 0.9)，生成 Blob 对象，可直接传给 FormData，避免 base64 编码膨胀（体积增约 33%）。 -
高频截图场景（如录屏预览）：创建离屏 Canvas（
document.createElement('canvas')），不插入 DOM，减少重绘开销；必要时复用同一 canvas 和 ctx，避免重复创建对象。
典型应用场景
这个能力已经深度融入不少实际产品中：
- 视频封面自动生成：用户上传视频后，系统自动截取第 3 秒帧作为默认封面，省去手动上传图的步骤。
- 在线教育笔记标记：学生看课时点击“截图”，连同当前时间戳和笔记一起保存，回看时精准定位。
- 视频会议即时留影：会议中一键截取全员画面，生成带水印的 PNG，用于纪要或分享。
- H5 剪辑工具帧预览：拖动时间轴时实时渲染当前帧到小画布，响应快、无闪烁。
