🎯 专业的HTML知识卡片转图片工具
将HTML知识卡片批量转换为高质量PNG/JPEG图片，专为AI生成内容的社媒分发而设计。
- 🖼️ 高质量转换 - 使用Playwright引擎，确保像素级完美渲染
- 👁️ 所见即所得预览 - 实时预览，支持10%-500%缩放
- 🎯 精确选择导出 - 可视化选择框，精确控制导出区域
- 🔧 多种裁切模式 - 全页面、CSS选择器、智能自动检测
- 🎨 灵活格式支持 - PNG透明背景 / JPEG压缩优化
- ⚡ 批处理能力 - 支持批量处理多个HTML文件
- 🌐 离线友好 - 支持离线模式，内联所有外部资源
| 主界面 | 预览模式 | 选择模式 |
|---|---|---|
 |
 |
 |
- 前往 Releases 页面
- 下载最新版本的
HTML2PNG-win32-x64.zip - 解压后双击
HTML2PNG.exe即可运行
- 导入HTML - 点击"选择HTML文件"按钮或直接粘贴HTML代码
- 预览调整 - 使用缩放控件查看效果，支持Ctrl+滚轮缩放
- 精确选择 - 启用选择模式，拖拽选择要导出的区域
- 设置参数 - 选择输出格式、分辨率、背景等选项
- 导出图片 - 点击导出按钮，选择保存位置
Ctrl + Plus- 放大预览Ctrl + Minus- 缩小预览Ctrl + 0- 重置缩放Ctrl + 滚轮- 快速缩放
├── src/
│ ├── main/ # Electron主进程
│ │ ├── main.ts # 应用入口
│ │ ├── ipc.ts # IPC通信处理
│ │ └── engine/ # Playwright截图引擎
│ ├── renderer/ # React前端界面
│ │ ├── App.tsx # 主应用组件
│ │ ├── components/ # UI组件
│ │ └── hooks/ # 自定义Hooks
│ └── preload/ # 预加载脚本
├── types/ # TypeScript类型定义
└── assets/ # 静态资源
# 安装依赖
npm install
# 开发模式运行
npm run dev
# 构建应用
npm run build
# 打包发行版
npm run build:win- 前端框架: React 18 + TypeScript + Vite
- 桌面框架: Electron
- 截图引擎: Playwright (Chromium内核)
- 构建工具: electron-builder
- 样式方案: Tailwind CSS + CSS Modules
- 操作系统: Windows 7 及以上版本
- 架构: 64位系统
- 内存: 建议4GB以上
- 磁盘空间: 500MB可用空间
interface ExportOptions {
format: 'png' | 'jpeg'; // 输出格式
width: number; // 输出宽度
height: number; // 输出高度
dpr: 1 | 1.5 | 2 | 3; // 设备像素比
quality?: number; // JPEG质量(0-100)
background?: string | 'transparent'; // 背景色
cropMode: 'full' | 'selector' | 'auto'; // 裁切模式
selector?: string; // CSS选择器
networkPolicy: 'online' | 'offline'; // 网络策略
}- 社媒卡片: 1080×1920 (9:16竖屏)
- 横版海报: 1600×900 (16:9横屏)
- 方形卡片: 1080×1080 (1:1正方形)
- 自定义尺寸: 支持任意宽高比
项目包含完整的测试覆盖：
# 运行单元测试
npm run test
# 运行E2E测试
npm run test:e2e
# 生成测试报告
npm run test:coverage- ✅ 外链字体渲染 (Google Fonts, Font Awesome)
- ✅ Tailwind CDN样式支持
- ✅ 透明背景PNG导出
- ✅ CSS选择器精确裁切
- ✅ 多分辨率DPR适配
- ✅ 离线模式资源内联
Q: 程序启动后界面空白？
A: 检查端口5173是否被占用，或重启程序等待加载完成。
Q: 导出的图片不完整？
A: 确保HTML内容已完全加载，尝试增加等待时间设置。
Q: 选择模式无法拖拽？
A: 确保已启用选择模式，并在预览区域内进行拖拽操作。
Q: Windows Defender报毒？
A: 这是误报，程序使用了Playwright浏览器引擎，请添加信任。
- 单页渲染+导出时间 < 2秒 (标准办公设备)
- Chromium进程池限制2个实例
- 支持离线模式减少网络依赖
欢迎提交Issue和Pull Request！
- Fork 本仓库
- 创建功能分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'Add amazing feature' - 推送分支:
git push origin feature/amazing-feature - 创建Pull Request
- 使用TypeScript编写代码
- 遵循ESLint规则
- 添加相应的单元测试
- 更新相关文档
本项目采用 MIT License 开源许可证。
- Electron - 跨平台桌面应用框架
- Playwright - 现代化浏览器自动化
- React - 用户界面库
- Vite - 新一代前端构建工具
⭐ Star | 🐛 Issues | 💬 Discussions
Made with ❤️ by wuxiaoxia88