必须为video元素添加crossorigin="anonymous"属性并正确设置canvas宽高，否则todataurl()会因跨域污染或尺寸错误而失败。
video 元素没加 crossOrigin 属性，toDataURL() 直接报错
Canvas 从 video 截图本质是「读取视频帧像素」，而浏览器默认禁止跨域视频的像素读取。哪怕视频在同域，用 file:// 协议打开、或视频由 CDN 提供（如 mp4 链接带域名），都可能触发 CORS 策略拦截。
常见错误现象：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
- 给
<video></video>加上crossOrigin="anonymous"属性（注意不是"use-credentials"） - 确保视频服务器返回了
Access-Control-Allow-Origin: *或对应源（CDN 一般支持配置） - 本地开发时别用双击打开 HTML 文件，改用
python3 -m http.server或 VS Code Live Server 启动服务
canvas.drawVideo() 不存在 —— 正确调用是 ctx.drawImage()
很多人搜 “video 截图” 会误以为有专用函数，其实所有操作都走 Canvas 2D 上下文的通用绘图方法。关键在于时机：必须等视频有画面帧可读，不能一加载完就画。
使用场景：用户点击按钮截当前帧、自动定时截图、播放暂停后截图
立即学习“前端免费学习笔记（深入）”；
-
video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA是安全绘制的前提 - 推荐监听
video的loadeddata事件后再首次截图，避免黑屏 - 示例代码片段：
const canvas = document.getElementById('myCanvas');<br>const ctx = canvas.getContext('2d');<br>ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
截图模糊或尺寸不对，多半是 canvas 宽高没设对
Canvas 的显示大小（CSS width/height）和实际绘图缓冲区大小（canvas.width/canvas.height）是两回事。直接用 CSS 缩放会导致像素拉伸、模糊，且 toDataURL() 输出的是缓冲区原始分辨率。
性能影响：缓冲区过大（比如设成 1920×1080）但只显示 320×180，内存和编码开销明显上升
- 用
video.videoWidth和video.videoHeight获取真实帧尺寸 - 显式设置
canvas.width = video.videoWidth，canvas.height = video.videoHeight - 如果需要缩略图，先按比例算出目标宽高，再传给
drawImage()的第 5–6 个参数（目标宽高），而非改 canvas 自身尺寸
保存为图片失败？toDataURL() 返回空字符串或 MIME 类型不匹配
toDataURL() 默认生成 image/png，但部分老旧安卓 WebView 或 iOS Safari 在某些视频编码下可能不支持 PNG 导出，返回空字符串；也有时因 canvas 被污染（CORS 未配好）而静默失败。
兼容性影响：iOS 15.4+ 对 HEVC 视频的 canvas 绘制支持仍不稳定，优先用 H.264
- 加上 try/catch 捕获异常，并 fallback 到
image/jpeg：try {<br> const url = canvas.toDataURL('image/jpeg', 0.9);<br>} catch (e) {<br> console.error('截图失败:', e);<br>} - 生成 URL 后，用
URL.createObjectURL()创建 blob URL 再赋给<a download></a>下载，比直接 window.open 更可靠 - 注意：Safari 对
download属性支持有限，移动端基本不可用，建议提示用户“长按图片保存”
