图片压缩工具 (Image Compressor)

这是一个简单易用的在线图片压缩工具，采用苹果风格设计，提供直观的用户界面和高效的压缩功能。无需后端服务器，纯前端实现，可以直接部署在 GitHub Pages 上使用。

在线预览

功能特点

• 支持上传 PNG、JPG 等格式的图片
• 提供压缩比例调节功能（0-100%）
• 实时预览原图和压缩后的效果
• 显示压缩前后的文件大小对比
• 支持压缩后图片的下载
• 优雅的苹果风格界面设计
• 支持拖拽上传
• 完全在浏览器端处理，保护隐私

快速开始

本地运行

1. 克隆仓库：

git clone https://github.com/你的用户名/image-compressor.git
cd image-compressor

2. 使用任意 Web 服务器运行，例如：

   • 使用 Python：

     python -m http.server 8080

   • 使用 Node.js 的 http-server：

     npx http-server

3. 在浏览器中访问 http://localhost:8080

GitHub Pages 部署

1. Fork 这个仓库
2. 进入仓库设置 (Settings)
3. 找到 Pages 设置
4. 在 Source 中选择 main 分支
5. 保存后等待部署完成

技术架构

• 前端：纯 HTML5 + CSS3 + JavaScript
• 图片处理：使用 browser-image-compression 库（v2.0.2）
• 界面设计：采用苹果设计语言，包括磨砂玻璃效果、优雅的动画过渡等

页面结构

主页面
├── 顶部标题栏
├── 图片上传区域
│   └── 拖拽上传提示
├── 图片预览区域
│   ├── 原图预览
│   └── 压缩后预览
├── 压缩控制面板
│   ├── 压缩比例滑块
│   ├── 文件大小信息
│   └── 下载按钮
└── 页脚信息

使用说明

1. 打开网页后，点击上传区域或将图片拖拽到上传区域
2. 上传完成后，原图将显示在左侧预览区
3. 使用压缩比例滑块调节压缩程度
4. 压缩后的图片将实时显示在右侧预览区
5. 确认压缩效果后，点击下载按钮保存压缩后的图片

浏览器兼容性

• Chrome 最新版
• Firefox 最新版
• Safari 最新版
• Edge 最新版

贡献指南

欢迎提交 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 文件

设计风格

• 配色：采用浅色主题，搭配苹果标志性的磨砂玻璃效果
• 字体：使用 SF Pro Display 字体（苹果系统默认字体）
• 交互：简洁直观的操作流程，搭配流畅的动画效果
• 响应式：适配各种屏幕尺寸的设备