一个 BMP ↔ PNG 无损图片转换器。
- 支持 BMP → PNG 和 PNG → BMP 的双向转换
- 批量上传，支持队列管理与 ZIP 打包下载
- PNG 颜色类型可选：自动 / 灰度 / RGB / 调色板 / 灰度+Alpha / RGBA
- 压缩策略可选：自动（优先 Dynamic Huffman，失败则回退 Fixed Huffman）/ Fixed Huffman / Stored（不压缩）/ Dynamic Huffman
- 即时预览，显示压缩率
- 三套主题：暗黑 / 亮白 / 深蓝
- Web Worker：编解码在独立线程执行，UI 全程保持响应
pnpm install
pnpm dev- 切换到 BMP → PNG 模式
- 将一个或多个
.bmp文件拖入上传区 - 选择颜色类型：
auto：根据图像内容自动选择最优类型（默认）grayscale/RGB/palette/grayscale-alpha/RGBA：强制指定类型
- 选择压缩策略：
auto：优先尝试 Dynamic Huffman，失败时回退到 Fixed Huffman（默认）fixed：Fixed Huffman，速度快，结果可预测stored：不压缩（用于调试）dynamic：Dynamic Huffman，压缩率最优，速度较慢
- 点击开始转换（
N个待处理）
Warning
BMP 路径目前仅支持 24-bit BMP 输入/输出。
- 切换到 PNG → BMP 模式
- 将
.png文件拖入上传区，无需手调编码参数 - 点击开始转换
全部转换完成后，点击全部下载，可将所有结果打包为单个 ZIP 文件。
左右两张图分别对应 PNG 编码和解码的流程：
| 文件 | 职责 |
|---|---|
lib/bmp.ts |
24-bit BMP 解析器与生成器 |
lib/pngEncoder.ts |
PNG 编码流水线总控 |
lib/pngDecoder.ts |
PNG 解码流水线总控 |
lib/png/bitstream.ts |
BitWriter / BitReader，DEFLATE 位级读写 |
lib/png/deflate-encode.ts |
LZ77 + DEFLATE 编码器（Fixed / Dynamic / Stored 三种策略） |
lib/png/inflate.ts |
zlib/DEFLATE 解码器 |
lib/png/filter.ts |
Paeth 滤波与逆滤波 |
lib/png/chunk.ts |
PNG Chunk 组装器 |
lib/png/checksum.ts |
CRC32 / Adler-32 |
lib/png/encode-plan.ts |
颜色类型自动选择逻辑 |
lib/png/deflate-common.ts |
DEFLATE 共享常量（length/distance code 表） |
workers/codec.worker.ts |
Web Worker 入口，路由 encode / decode 请求 |
| 文件 | 职责 |
|---|---|
app/page.tsx |
主页面，调用 useConverterQueue |
components/converter/useConverterQueue.ts |
任务调度状态机 |
components/converter/useCodecWorker.ts |
Worker 生命周期封装 |
components/converter/state.ts |
fileQueueReducer 负责队列状态迁移 |
components/converter/fileRead.ts |
File → ArrayBuffer 加载器 |
components/converter/download.ts |
单文件下载 + ZIP 批量下载 |
- Next.js 16 + React 19：应用框架
- TypeScript 5：全链路类型安全
- Tailwind CSS v4 + CSS Modules：样式管理
- Web Worker：线程外执行编解码
- JSZip：批量打包下载
- next-themes：暗黑 / 亮白 / 深蓝主题切换
- lucide-react：图标库