Canvas drawImage 捕获 video 黑屏主因是 video 未就绪或跨域污染：需监听 loadeddata 事件、设置 crossOrigin="anonymous"、确保 readyState ≥ 2，且 canvas 宽高为正整数。
Canvas drawImage 捕获 video 元素画面时黑屏怎么办
直接调用 drawImage 却得到全黑或空白图像，大概率是 video 还没加载完成、没播放、或未满足 canvas 捕获前提。video 必须处于「可绘制状态」：已加载元数据（loadedmetadata）、至少帧已解码（canplay 或 playing），且不能是跨域资源（否则会触发 canvas 污染）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
video的loadeddata事件后再首次调用drawImage，比loadedmetadata更可靠 - 确保
video元素设置了crossOrigin="anonymous"（若源为外部 URL），否则即使加载成功也会因污染被拒绝读取 - 避免在
autoplay未生效或用户未交互（如点击）时尝试捕获——部分浏览器会阻止静音 autoplay 下的 canvas 读取 - 检查
video.readyState≥ 2（HAVE_CURRENT_DATA）再绘制，可用setInterval轮询或监听timeupdate
缩略图尺寸与 canvas 像素比不匹配导致模糊或拉伸
canvas 绘制本身不自动缩放像素，drawImage 的目标宽高若与 canvas 的 width/height 属性值不一致，就会触发浏览器插值缩放，造成失真。常见错误是只设了 CSS 样式宽高，却没同步设置 canvas 的 DOM 属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置 canvas 的
width和height属性（不是 CSS），例如：canvas.width = 160; canvas.height = 90; - 若需保持宽高比缩放，先计算目标尺寸：
const scale = Math.min(160 / video.videoWidth, 90 / video.videoHeight);，再传入drawImage(video, 0, 0, video.videoWidth * scale, video.videoHeight * scale) - 避免用
ctx.scale()替代尺寸计算——它会影响后续所有绘制，且易叠加误差 - 对高清预览缩略图（如用于封面），建议 canvas 尺寸不低于 320×180，再用 CSS 缩小显示，保留清晰度
生成 Data URL 后无法下载或显示为空白
canvas.toDataURL() 返回空字符串或损坏 base64，通常源于 canvas 被污染（tainted canvas），即曾绘制过跨域但未声明 crossOrigin 的视频/图片；也可能是调用时机过早（video 未就绪）或 canvas 尺寸为 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认 video 元素有
crossOrigin="anonymous"，且服务端响应头包含Access-Control-Allow-Origin: *（或指定域名） - 不要在
video.src赋值后立刻调用toDataURL，必须等loadeddata或playing事件之后 - 检查 canvas
width和height是否为正整数——若为 0 或 NaN，toDataURL必然返回空串 - 如需导出 PNG（而非默认 JPEG），显式传参：
canvas.toDataURL('image/png', 1.0)；JPEG 可加质量参数（0.1–1.0）控制体积
高频截图导致性能卡顿或内存泄漏
每秒多次 drawImage + toDataURL 会快速堆积 bitmap 数据，尤其在移动端易触发 GC 停顿或 OOM。不是所有场景都需要逐帧截图——缩略图通常只需关键帧或间隔采样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame替代setInterval控制捕获节奏，自然对齐屏幕刷新率 - 限制最小间隔，例如每 500ms 最多捕获一次：
if (Date.now() - lastCapture > 500) { capture(); lastCapture = Date.now(); } - 复用同一 canvas 和 2D context，避免反复创建；
toDataURL后无需清空 canvas，但若后续绘制内容不同，应调用ctx.clearRect(0, 0, w, h) - 若仅需缩略图 URL 而非立即使用，可改用
canvas.toBlob(callback, type, quality)避免 base64 字符串内存开销
canvas 污染问题最隐蔽也最难调试，一旦发生，整个 canvas 就不可读取——连 getImageData 都会抛错。务必在 video 加载阶段就验证 crossOrigin 设置是否生效，而不是等到截图失败才排查。
