HTML5中用截取帧需确保视频就绪、未静音、跨域设置crossOrigin；调用drawImage()绘制后，用toDataURL()或toBlob()导出图像，推荐toBlob控制质量与体积。
在 HTML5 中，用 <canvas></canvas> 实时截取 <video></video> 当前帧作为静态缩略图，核心是调用 canvas.getContext('2d').drawImage() 把视频画面绘制到画布上，再用 canvas.toDataURL() 或 canvas.toBlob() 导出图像。
确保 video 元素可绘制（关键前提）
不是所有视频都能随时绘制——必须满足以下条件，否则 drawImage() 会报错或输出空白：
-
视频已加载并处于可播放状态：监听
loadeddata或canplay事件后再操作 -
视频未静音且未被策略阻止（如自动播放限制）：若视频带音频且未用户交互就播放，可能被浏览器暂停；建议设
muted属性 -
跨域视频需设置
crossOrigin="anonymous"：否则 canvas 会被污染，无法读取像素或导出数据
实时截图的推荐写法（含防错处理）
下面是一个安全、可复用的截图函数示例：
function captureVideoFrame(video, canvas) {
const ctx = canvas.getContext('2d');
// 检查视频是否就绪
if (!video || video.readyState < video.HAVE_CURRENT_DATA) return null;
// 设置 canvas 尺寸匹配视频当前渲染尺寸（非 videoWidth/Height，而是实际显示宽高）
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 绘制当前帧
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 返回 base64 图片（适合小图预览）
return canvas.toDataURL('image/png');
}
// 使用示例：
const video = document.getElementById('myVideo');
const canvas = document.getElementById('snapshotCanvas');
// 点击按钮截图
document.getElementById('captureBtn').addEventListener('click', () => {
const thumbnail = captureVideoFrame(video, canvas);
if (thumbnail) {
document.getElementById('previewImg').src = thumbnail;
}
});
导出高清缩略图（推荐 toBlob + 压缩控制）
toDataURL 简单但生成 base64 字符串较大、不可控质量；生产环境更推荐 toBlob：
立即学习“前端免费学习笔记（深入）”；
- 支持 JPEG 格式和质量参数（如
0.8），大幅减小体积 - 返回 Blob 对象，可直接用于上传、下载或创建 URL
function captureAsBlob(video, callback, quality = 0.8) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
canvas.toBlob(
blob => callback(blob),
'image/jpeg',
quality
);
}
// 调用示例：生成缩略图 URL 并显示
captureAsBlob(video, blob => {
const url = URL.createObjectURL(blob);
document.getElementById('previewImg').src = url;
// 注意：使用后可调用 URL.revokeObjectURL(url) 释放内存
});
进阶提示：避免截图模糊或拉伸
常见问题及解决方式：
-
画面变形：不要直接用
video.offsetWidth/Height，它们是 CSS 渲染尺寸，可能含缩放；应以video.videoWidth/videoHeight为基准，按需缩放 canvas 内容（用drawImage(video, 0,0,w,h)控制目标区域） -
截图模糊：确保 canvas 物理像素与目标尺寸一致（例如高清屏下需乘
window.devicePixelRatio并设置 CSS 尺寸） -
截图时机不准：若需精准帧（如逐帧分析），可监听
timeupdate或结合requestAnimationFrame提升响应性
