Ubuntu
107 lines
2.1 KiB
Markdown
107 lines
2.1 KiB
Markdown
# 相册查看器
|
|
|
|
手机端友好的相册浏览 Web 应用。
|
|
|
|
## 功能特性
|
|
|
|
- 📱 手机浏览器优化，响应式布局
|
|
- 🖼️ 三列网格展示，留白均匀
|
|
- 📂 支持多级相册嵌套
|
|
- 🔄 懒加载优化，流畅浏览
|
|
- 🔍 点击查看原图
|
|
- ⚡ 缩略图加速加载
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
album-viewer/
|
|
├── backend/
|
|
│ └── app.py # Flask 后端服务
|
|
├── frontend/
|
|
│ └── index.html # 前端页面
|
|
├── tools/
|
|
│ └── generate_thumbnails.py # 缩略图生成工具
|
|
└── start.sh # 启动脚本
|
|
```
|
|
|
|
## 安装依赖
|
|
|
|
```bash
|
|
# 安装 Python 依赖
|
|
pip3 install flask flask-cors
|
|
|
|
# 确保已安装 ImageMagick（用于生成缩略图）
|
|
which convert
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
### 1. 生成缩略图（首次使用必需）
|
|
|
|
```bash
|
|
cd ~/nanocode/album-viewer
|
|
python3 tools/generate_thumbnails.py
|
|
```
|
|
|
|
**工具特性：**
|
|
- ✅ **递归处理**：自动扫描所有子目录
|
|
- ✅ **重复安全**：已存在的缩略图自动跳过
|
|
- ✅ **智能更新**：原图修改后自动重新生成
|
|
- ✅ **自动清理**：删除原图后自动清理对应缩略图
|
|
|
|
缩略图会生成在每个相册的 `thumbnails/` 子目录下。
|
|
|
|
### 2. 启动服务
|
|
|
|
```bash
|
|
./start.sh
|
|
```
|
|
|
|
或手动启动：
|
|
|
|
```bash
|
|
cd backend
|
|
python3 app.py
|
|
```
|
|
|
|
### 3. 访问
|
|
|
|
- PC: http://localhost:8892
|
|
- 手机: http://<服务器IP>:8892
|
|
|
|
## 相册目录结构
|
|
|
|
```
|
|
/home/ubuntu/albums/
|
|
├── 相册1/
|
|
│ ├── image1.jpg
|
|
│ ├── image2.jpg
|
|
│ └── thumbnails/ # 自动生成的缩略图
|
|
│ ├── image1.jpg
|
|
│ └── image2.jpg
|
|
├── 相册2/
|
|
│ └── ...
|
|
└── 子相册/
|
|
└── ...
|
|
```
|
|
|
|
## 技术规格
|
|
|
|
| 项目 | 规格 |
|
|
|------|------|
|
|
| 缩略图宽度 | 320px（等比缩放）|
|
|
| 网格布局 | 3列，间距 12px |
|
|
| 缩略图比例 | 2:3（高度=宽度×1.5）|
|
|
| 图片质量 | 85% |
|
|
| 服务端口 | 8892 |
|
|
|
|
## 更新相册
|
|
|
|
添加新图片后，重新生成缩略图：
|
|
|
|
```bash
|
|
python3 tools/generate_thumbnails.py
|
|
```
|
|
|
|
工具会自动跳过已存在的缩略图。
|