product/TinyPanda
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
Files
master
TinyPanda/README.md

5.4 KiB
Raw Permalink Blame History

TinyPanda 🐼

专业的图片压缩工具，基于 Electron 和 Tinify API 构建。

TinyPanda Logo

✨ 功能特性

  • ✅ 批量图片压缩 - 支持队列管理，可同时处理多张图片
  • ✅ 实时进度显示 - 显示压缩进度和状态
  • ✅ 压缩效果对比 - 显示压缩前后大小对比及节省比例
  • ✅ 打包下载 - 支持将所有压缩后的图片打包为 ZIP 下载
  • ✅ 拖拽上传 - 支持拖拽图片到上传区域
  • ✅ 美观的现代化 UI - Windows 11 Fluent Design 风格界面
  • ✅ 自定义标题栏 - 无边框窗口设计，支持窗口控制

🖼️ 支持的图片格式

  • JPG / JPEG
  • PNG
  • WebP

🚀 快速开始

环境要求

  • Node.js >= 14.0.0
  • npm >= 6.0.0

安装依赖

npm install

配置 API Key

  1. 访问 Tinify 官网 注册账号
  2. 获取您的 API Key
  3. 在项目根目录创建 .env 文件，添加以下内容：
TINIFY_API_KEY=your_api_key_here

运行应用

npm run dev

打包应用

# 打包为 Windows 应用
npm run build:win

# 打包为所有平台
npm run build

打包后的应用将输出到 dist 目录。

📖 使用说明

1. 验证 API Key

  • 点击右上角设置按钮
  • 输入您的 API Key
  • 点击"验证"按钮确认有效性
  • 点击"保存"保存配置

2. 添加图片

  • 方法一：点击"选择图片"按钮选择文件
  • 方法二：直接拖拽图片到上传区域

3. 压缩图片

  • 添加图片后，点击"全部压缩"按钮
  • 等待所有图片压缩完成
  • 查看每张图片的压缩前后大小对比和节省比例

4. 下载结果

  • 单张下载：点击每张图片的"下载"按钮
  • 批量下载：点击"打包下载"按钮，选择保存位置

🛠️ 技术栈

  • Electron 32.0.0 - 桌面应用框架
  • Tinify API - 专业图片压缩服务
  • JSZip 3.10.1 - 文件打包
  • Electron Store 8.2.0 - 配置持久化
  • 原生 CSS - Windows 11 Fluent Design 风格

📁 项目结构

TinyPanda/
├── src/
│   ├── main/
│   │   └── index.js          # 主进程代码（窗口管理、IPC 通信）
│   └── renderer/
│       ├── index.html        # 渲染进程 HTML
│       ├── styles.css        # 样式文件
│       ├── app.js            # 渲染进程逻辑
│       └── icons.js          # 图标组件
├── assets/                   # 资源文件（图标等）
├── .env                      # 环境变量配置
├── package.json              # 项目配置
└── README.md                 # 项目说明

🔑 API Key 注意事项

  • 每个账户每月有 500 次免费压缩额度
  • API Key 请妥善保管，不要泄露
  • 可以在 Tinify 官网 查看详细文档
  • 压缩失败时请检查 API Key 是否有效、网络连接是否正常

🎨 UI 设计

TinyPanda 采用 Windows 11 Fluent Design 设计语言，提供：

  • 流畅的动画效果
  • 半透明毛玻璃效果
  • 现代化的图标和按钮
  • 响应式的布局设计
  • 清晰的状态指示

📝 开发指南

代码风格

  • 使用 ES6+ JavaScript 语法
  • 主进程和渲染进程通过 IPC 通信
  • 使用 async/await 处理异步操作

IPC 通信协议

主进程提供以下 IPC 处理器：

  • get-api-key - 获取当前 API Key
  • set-api-key - 设置 API Key
  • validate-api-key - 验证 API Key
  • compress-image - 压缩单张图片
  • get-image-info - 获取图片信息
  • save-compressed-image - 保存压缩后的图片
  • create-zip - 创建 ZIP 压缩包
  • select-save-directory - 选择保存目录
  • select-files - 选择文件
  • window-minimize/maximize/close - 窗口控制

添加新功能

  1. 在 src/main/index.js 中添加 IPC 处理器
  2. 在 src/renderer/app.js 中调用相应的 IPC 方法
  3. 在 src/renderer/index.html 中添加 UI 元素
  4. 在 src/renderer/styles.css 中添加样式

🐛 常见问题

Q: 压缩失败怎么办？

A: 请检查以下项：

  • API Key 是否有效
  • 网络连接是否正常
  • 文件格式是否支持（JPG、PNG、WebP）
  • 查看控制台错误信息

Q: 如何获取更多压缩额度？

A: 访问 Tinify 官网 查看付费计划。

Q: 可以离线使用吗？

A: 不可以，压缩功能需要连接到 Tinify API 服务器。

Q: 压缩后的图片质量如何？

A: Tinify 使用智能压缩算法，在保持视觉质量的同时最大化压缩率，通常可以减少 50-80% 的文件大小。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

👥 作者

Pandora Studio

🙏 致谢

  • Electron - 跨平台桌面应用框架
  • Tinify - 专业图片压缩服务
  • JSZip - JavaScript ZIP 库

⭐ 如果这个项目对你有帮助，请给它一个 Star！