# image-compressor

**Repository Path**: wangyanweiie/image-compressor

## Basic Information

- **Project Name**: image-compressor
- **Description**: 图片压缩工具 - 高效压缩图片，保持最佳质量
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-11-09
- **Last Updated**: 2026-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片压缩工具

一个现代、高效的图片压缩工具网站，支持 JPG、PNG、WebP 等格式的图片压缩。

## 功能特点

- ✅ 支持多种图片格式（JPG、PNG、WebP）
- ✅ 可调节压缩质量（预设高质量、中等、低质量 + 自定义滑块）
- ✅ 实时预览原始图片与压缩后图片的对比
- ✅ 显示图片尺寸、文件大小及压缩节省比例
- ✅ 支持批量上传和压缩
- ✅ 一键下载或批量下载
- ✅ 现代简约设计，绿色主题
- ✅ 响应式布局，完美支持移动端和桌面端

## 技术栈

- **后端**: Flask (Python)
- **前端**: HTML5, CSS3, Vanilla JavaScript
- **图片处理**: Canvas API (前端压缩)

## 项目结构

```
image-compressor/
├── app.py                 # Flask 后端服务器
├── requirements.txt       # Python 依赖
├── static/
│   ├── css/
│   │   └── style.css     # 样式文件
│   └── js/
│       └── script.js     # 前端脚本
├── templates/
│   └── index.html        # 主页面
└── uploads/              # 上传文件临时目录
```

## 安装步骤

### 1. 安装 Python

确保已安装 Python 3.7 或更高版本：
```bash
python --version
```

### 2. 安装依赖

进入项目目录并安装依赖：
```bash
cd image-compressor
pip install -r requirements.txt
```

### 3. 启动服务器

运行 Flask 应用：
```bash
python app.py
```

服务器将在 `http://localhost:5000` 启动。

## 使用方法

1. **上传图片**
   - 点击上传区域选择图片，或直接拖放图片到上传区域
   - 支持批量上传
   - 单个文件最大 16MB

2. **设置压缩质量**
   - 选择预设质量（高质量 90%、中等质量 75%、低质量 60%）
   - 或使用滑块自定义压缩比例（10% - 100%）

3. **开始压缩**
   - 点击"开始压缩"按钮
   - 等待压缩完成

4. **查看结果**
   - 对比原始图片与压缩后图片
   - 查看文件大小节省比例

5. **下载**
   - 单张图片：点击"下载"按钮
   - 批量下载：点击"下载全部"按钮

## 压缩效果

压缩效果因图片内容而异，一般情况：

- **高质量（90%）**: 几乎无视觉损失，节省 20-40%
- **中等质量（75%）**: 轻微视觉损失，节省 40-60%
- **低质量（60%）**: 可见压缩痕迹，节省 60-80%

## 注意事项

1. 所有图片处理在前端完成，不上传到服务器（更安全、更快速）
2. 压缩后的图片自动下载，无需手动保存
3. 建议在正式使用前先测试不同质量设置，找到最佳平衡点
4. 对于需要最高质量的图片（如打印），建议使用高质量设置

## 浏览器兼容性

- Chrome/Edge (推荐)
- Firefox
- Safari
- Opera

需要支持 HTML5 Canvas API 的现代浏览器。

## 开发说明

本项目使用纯 JavaScript 处理图片压缩，无需后端图像处理库。压缩使用 Canvas API 的 `toBlob()` 方法实现。

### 修改默认设置

可在 `static/js/script.js` 中修改：
- `app.config['MAX_CONTENT_LENGTH']`: 最大文件大小
- 压缩质量默认值

### 自定义样式

修改 `static/css/style.css` 中的 CSS 变量：
- `--primary-color`: 主色调（默认绿色）
- 其他颜色变量

## 许可证

MIT License

## 联系方式

如有问题或建议，请提交 Issue。