HTML5 canvas截取video画面需确保时机、尺寸、跨域三要素：等待loadeddata事件触发后绘制；用video.videoWidth/Height设置canvas尺寸；远程视频需crossorigin="anonymous"及服务端CORS支持。
HTML5 中用 canvas 截取 video 当前画面，核心是把视频帧“画”进 canvas，再导出为图片。关键不在调 API，而在三个细节：时机对不对、尺寸准不准、跨域通不通。
确保视频已就绪再截图
不能一加载完 video 标签就立刻 drawImage——此时视频可能还没解码首帧，截出来是黑屏或空白。必须等视频元数据和首帧准备就绪：
- 监听 loadeddata 事件（推荐）：表示视频元数据+首帧已加载完成，可安全绘制
- 或监听 canplay 事件：表示浏览器认为可以开始播放，但首帧未必已解码，稳定性略低
- 若需截指定时间点（如第2秒），先设
video.currentTime = 2，再监听 seeked 事件，确保跳转完成后再绘制
canvas 尺寸必须匹配原始分辨率
canvas 的 width 和 height 是 DOM 属性，不是 CSS 样式。错用 clientWidth/clientHeight 会导致模糊或拉伸：
- 正确做法：用
video.videoWidth和video.videoHeight设置 canvas 尺寸canvas.width = video.videoWidth;<br>canvas.height = video.videoHeight;
- 然后调用
ctx.drawImage(video, 0, 0)—— 这样才完整承载一帧原始像素 - 如果只要缩略图，不改 canvas 尺寸，改用 drawImage 的九参数形式做缩放绘制，避免失真
远程视频必须处理跨域问题
视频来自 CDN 或其他域名时，不加跨域声明，canvas 会被污染，toDataURL() 返回空字符串：
- video 标签必须加
crossorigin="anonymous" - 服务端响应头需包含
Access-Control-Allow-Origin: *（或指定域名） - 缺任一环，截图都会失败；本地文件（file://）或同源视频可跳过此步
导出图片要避开常见坑
截图后导出，优先用 toBlob 而非 toDataURL，更稳定、内存更友好：
- 用
canvas.toBlob(blob => { ... }, "image/jpeg", 0.95)生成 Blob - 通过
URL.createObjectURL(blob)创建临时链接 - 用
@#@#@#@#@#@#@#@#@#@0触发下载 - 下载完成后务必调用
URL.revokeObjectURL(url)释放内存 - iOS Safari 或旧 WebView 对 PNG 支持不稳定，可改用 JPEG 格式并设质量参数
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
