html5视频截图需显式设置canvas宽高为video.videowidth/height，用drawimage绘制后优先toblob导出；须处理cors、mime兼容性及旧浏览器兜底。
直接用 Canvas 把 video 当前画面画进去，再导出成图片就行。核心是帧捕获时机、尺寸匹配和导出格式兼容性，不是所有视频都能一键截成功。
把视频帧准确画到 Canvas 上
不能只靠 canvas 默认宽高，必须显式设置 canvas 尺寸为视频真实分辨率：
- 用 video.videoWidth 和 video.videoHeight 获取当前视频帧的原始像素尺寸
- 立刻赋值给 canvas.width 和 canvas.height（注意：这是 DOM 属性，不是 CSS 样式）
- 调用 ctx.drawImage(video, 0, 0) 绘制——此时 canvas 才能完整承载一帧，避免拉伸或裁切
- 如果只要缩略图，不改 canvas 尺寸，而是用 drawImage(video, 0, 0, width, height, 0, 0, targetW, targetH) 缩放绘制
导出图片时避开常见失败
toDataURL() 返回空字符串，大概率是这两个原因：
-
CORS 污染：视频资源跨域且没配
crossOrigin="anonymous"，或服务端缺Access-Control-Allow-Origin响应头 -
MIME 不兼容：默认生成
image/png，但某些 iOS Safari 或老旧安卓 WebView 对视频帧 PNG 导出支持不稳定；可尝试toDataURL("image/jpeg", 0.9)或改用toBlob()
保存到本地更稳妥的做法
推荐优先用 toBlob + URL.createObjectURL，尤其对大尺寸帧：
- 调用 canvas.toBlob(blob => { ... }, "image/jpeg", 0.95) 生成 Blob
- 用 URL.createObjectURL(blob) 得到临时链接
- 创建 a 标签，设 href 为该链接，download 为文件名，再 a.click()
- 下载完成后务必执行 URL.revokeObjectURL(url)，释放内存
兼容旧浏览器的兜底方案
IE11 或极老环境不支持 download 属性：
- 检测 navigator.msSaveBlob 是否存在
- 存在则直接调用 navigator.msSaveBlob(blob, "snapshot.jpg")
- 否则退回到 toDataURL + window.location.href 方案（注意替换 MIME 类型为
image/octet-stream避免 DOM 异常）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
