Video to Image Sequence

English | 简体中文

A video frame extraction tool that runs entirely in the browser. Files are never uploaded, and videos are never sent to any server. Extract frames from a video as PNG, JPEG, or WebP sequences and download them as a ZIP archive.

Features

• Drag and drop or click to choose a local video
• Supports browser-decodable formats such as MP4, MOV, AVI, MKV, WEBM, and FLV
• Custom output format, FPS, start time, duration, quality, and dimensions
• Maintain aspect ratio with automatic scaling
• Quick presets: stop-motion reference frames, machine learning dataset
• Progress display, result preview thumbnails, and one-click ZIP download
• Automatic frame numbering: segmented exports continue from the correct frame number
• Memory safety: warns early when the output is too large and supports segmented export

Quick Start

Option 1: Double-click launcher (recommended)

Node.js 18+ must be installed first (npm is included with Node.js). The script itself does not install Node.js.

Double-click 启动转换器.cmd in the project root. The script will:

• Run npm install automatically when dependencies are missing
• Start the dev server and open the browser automatically
• Open the browser directly without starting a duplicate server when one is already running
• Keep the window open to show the error message when startup fails

Option 2: Command line

Requires Node.js 18+.

npm install
npm run dev

The dev server runs at http://127.0.0.1:5273 by default.

Build

npm run build

Build output goes to dist/ in the project root.

Usage

1. Upload a video and wait for duration and resolution info to load.
2. Configure the output format and extraction parameters.
3. Click "Start Extraction" and wait for the process to finish.
4. Preview the result on the right and download the ZIP archive.

Segmented export

When the total output is too large, export it in segments by start time, for example:

• First batch: start time 0, duration 3
• Second batch: start time 3, duration 3

Frame numbers continue automatically. At 60 FPS, the first batch is mafei_00001 to mafei_00180, and the second batch is mafei_00181 to mafei_00360. Merging them into one folder will not produce duplicate names.

Project Structure

Video-png/
├── src/
│   ├── components/
│   │   └── ToolRunner.jsx
│   ├── data/
│   │   └── toolData.js
│   ├── lib/
│   │   └── extractFrames.js
│   ├── styles/
│   │   └── global.css
│   ├── App.jsx
│   ├── index.html
│   └── main.jsx
├── .gitignore
├── package.json
├── package-lock.json
├── vite.config.js
└── 启动转换器.cmd

Tech Stack

• Vite
• React
• JSZip
• Lucide React

Notes

• All processing happens locally in the browser; videos are never uploaded.
• If the browser cannot decode a video codec, an error is shown. H.264 MP4 or WebM is recommended.
• High resolution, high FPS, and long duration exports use a lot of memory. Adjust parameters or export in segments.