一键提取视频的首帧、尾帧、任意指定帧。纯浏览器本地运行 —— 不上传、不注册、无水印、不限次数。
一个挑不出依赖的单文件网页工具。没有后端、没有构建步骤、没有 npm install —— 克隆下来双击 index.html 就能用。
┌─────────────────────────────────────────────────────────┐
│ Frame Extractor 视频帧提取器 │
│ 不上传 · 免注册 · 无水印 · 无限次 · 可离线 │
├─────────────────────────────────────────────────────────┤
│ ┌───────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 视频预览 / 拖放区 │ │
│ │ │ │
│ └───────────────────────────────────────────────────┘ │
│ 时长 12.40秒 分辨率 1920 × 1080 大小 8.4 MB │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━○ │
│ 3.52s 12.40s │
│ │
│ 时间(秒) [3.52] 帧号 [106] fps [30] [播放] │
│ [⏮ 首帧] [◀ 上一帧] [下一帧 ▶] [尾帧 ⏭] │
│ [提取此帧] [提取首帧 + 尾帧] [换视频] │
├─────────────────────────────────────────────────────────┤
│ ② 批量提取 │
│ [ 0, 1.5, 3, 5.2, end ] │
│ [开始批量提取] │
├─────────────────────────────────────────────────────────┤
│ ③ 已提取 6 帧 [打包下载] [清空] │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 0.00s │ │ 1.50s │ │ 3.00s │ │ 5.20s │ ... │
│ │ 下载 删│ │ 下载 删│ │ 下载 删│ │ 下载 删│ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
└─────────────────────────────────────────────────────────┘
因为现有的方案都不顺手：
| 现有做法 | 问题 |
|---|---|
| 播放器手动拖时间轴截图 | 拖不准，永远差那么一两帧 |
| 在线"视频转图片"网站 | 让你手动填时间点，没有首尾帧快捷入口 |
| 商业视频工具 | 要注册、要积分、导出带水印 |
| FFmpeg 命令行 | 快，但有学习成本，改个时间点要重敲命令 |
市面上的帧提取工具没有一个是专门为"首尾帧"这个场景设计的。而首尾帧恰恰是 AI 视频工作流里最常用的素材 —— 拿它们去喂首尾帧生视频模型（Seedance / Veo / Wan），或者做转场锚点。
所以有了这个。
三种提取模式
- 单帧 —— 拖时间轴 / 输入时间 / 输入帧号，定位到任意一帧提取
- 首尾帧 —— 一个按钮同时拿到第一帧和最后一帧
- 批量 ——
0, 1.5, 3, end按时间点批量抽；every:1按间隔全片抽
帧级微调
- 上一帧 / 下一帧步进按钮（按你设定的 fps 计算步长）
- 键盘操作：
←→步进一帧、空格播放暂停、K提取当前帧 - 时间轴支持实时拖动预览
隐私优先
- 视频文件从不离开你的设备，全部在浏览器内存中解码
- 无网络请求、无分析脚本、无 cookies
- 断网照常工作
零依赖
- 单个 HTML 文件，把全站塞进 30KB
- ZIP 打包逻辑手写实现（store 模式，不压缩），不需要 JSZip
- 没有构建步骤，改完直接刷新
git clone https://github.com/YOURNAME/frame-extractor.git
cd frame-extractor然后双击 index.html，或者把它拖进浏览器窗口。完事。
推到 GitHub 后，在仓库 Settings → Pages 里选择 main 分支的 / (root)，几分钟后就能通过
https://YOURNAME.github.io/frame-extractor/
访问。因为整个应用就是根目录的 index.html，不需要任何构建配置。
python -m http.server 8000
# 打开 http://localhost:8000拖入视频 → 点 提取首帧 + 尾帧 → 下方列表出现两张图，各自下载，或点 打包下载 一次拿走。
尾帧取的是
时长 − 0.04 秒。因为很多播放器在精确的结尾位置会返回黑帧，提前 40 毫秒能稳定拿到最后一帧画面。
方式 A：拖时间轴
时间轴线实时显示秒数，拖到想要的位置，点 提取此帧。
方式 B：输入时间
在「时间（秒）」里填 3.52，回车，画面跳过去，点 提取此帧。
方式 C：输入帧号
先设好视频的真实帧率（默认 30），然后在「帧号」里填 106。适合需要精确到第 N 帧的场景。
方式 D：帧步进
用 ◀ 上一帧 / 下一帧 ▶ 一点点找，方向键更快。找到后按 K 或者点 提取此帧。
在批量输入框里写时间点，逗号或空格分隔：
0, 1.5, 3, 5.2, end
end 会被替换成最后一帧。中英文逗号都认，换行分隔也行。
想均匀撒点，用间隔语法：
every:1 ← 全片每 1 秒抽一帧
every:0.5 ← 每半秒抽一帧
提取过程有进度条，中途失败会告诉你卡在第几帧、已经成功了多少张。
- 帧数不多时：点
打包下载，直接拿到一个 ZIP - ZIP 由内置的编码器现写，纯前端，不依赖任何第三方库
| 参数 | 说明 |
|---|---|
| 帧率 fps | 只影响「帧号↔时间」的换算和帧步进的步长。浏览器不暴露视频真实帧率，所以需要你手动填。常见值：24（电影）、25（PAL）、30（多数手机/屏幕录制）、60（高帧率） |
| 尾帧提前量 | 固定 0.04 秒，避开结尾黑帧 |
| 单次上限 | 400 帧。超过会提示分批处理，避免把浏览器内存吃满 |
| 输出格式 | 单帧为 PNG（无损）；列表缩略图用 JPEG 以节省内存 |
| 浏览器 | 状态 |
|---|---|
| Chrome / Edge 90+ | ✅ 完整支持 |
| Firefox 90+ | ✅ 完整支持 |
| Safari 15+ | ✅ 支持（个别编码的解码能力略弱） |
| 移动端浏览器 | ✅ 基本可用（拖放不可用，用文件选择） |
不支持的视频编码：H.265 / HEVC。多数浏览器出于专利原因不内置解码器。遇到这种情况工具会明确提示，用其他工具转成 H.264 的 MP4 即可：
ffmpeg -i input.mp4 -c:v libx264 -crf 18 -c:a copy output.mp4Q：视频会被上传吗？
不会。全程用 URL.createObjectURL 把文件读进浏览器内存，用 <video> + <canvas> 解码和截取。你可以断网测试。
Q：提取的帧会不会被压缩？ 单帧输出是 PNG 无损，分辨率与视频原分辨率一致。列表里的缩略图是 JPEG，只用于预览，下载拿到的始终是 PNG 原图。
Q：帧号不准？ 先确认 fps 填对了。工具无法自动探测视频真实帧率 —— 这不是偷懒，浏览器确实没有暴露这个 API。如果你知道视频是 29.97 fps 这类非整数帧率，直接填小数即可。
Q：能处理多大的视频？ 取决于你的内存。因为整段视频要进内存解码，建议单文件不超过 2GB。超长视频建议先用 ffmpeg 切段。
Q：为什么尾帧要提前 0.04 秒？
把 currentTime 设成精确的 duration，很多浏览器会返回黑帧或最后一帧之后的位置。提前 40 毫秒是实践中稳定拿到最后一帧画面的经验值。
frame-extractor/
├── index.html 整个应用（HTML + CSS + JS 单文件）
├── tests/
│ └── test.js 回归测试（node tests/test.js）
├── LICENSE MIT
├── .gitignore
└── README.md
node tests/test.js不需要安装任何依赖。测试会从 index.html 里抽出纯函数（clampTime / parseBatch / crc32 / buildZip）放进沙箱执行 —— 所以测的是真实源码，不是副本。
覆盖范围：
- 批量解析：时间点模式、间隔模式、中英文标点、
end关键字 - 异常输入：乱填文字、超出片长、负数、空输入、零间隔
- 边界情况：0.02 秒的极短片、零时长
- CRC32 标准测试向量（
"123456789"→0xCBF43926） - 手写 ZIP 的结构校验：文件头签名、EOCD 记录、中央目录偏移、条目名
- 导出 GIF / WebP 动图
- 帧序列导出（按固定间隔导出全部帧）
- 裁剪与缩放后导出
- 记住上次使用的 fps 设置
- 深色 / 浅色主题切换
Issue 和 PR 都欢迎。提交前请确保：
node tests/test.js全绿- 在 Chrome 和 Firefox 里各手动验证一遍
- 不引入任何运行时依赖 —— 单文件和零依赖是这个项目的底线
MIT —— 随便用，商用也行。