311 lines
6.6 KiB
Markdown
311 lines
6.6 KiB
Markdown
# 预览图尺寸调整 - 300x500 更新报告
|
||
|
||
## 📅 更新信息
|
||
- **更新日期**: 2025-10-26
|
||
- **版本**: v1.1.0
|
||
- **状态**: ✅ 已完成并部署
|
||
|
||
---
|
||
|
||
## 🎯 更新目标
|
||
|
||
将首页卡片预览图从原来的 **300x300** 正方形调整为 **300x500** 竖版长图格式，以更好地展示纵向素材。
|
||
|
||
---
|
||
|
||
## ✨ 主要更改
|
||
|
||
### 1️⃣ **PSD处理器优化** (`lib/psd-processor.ts`)
|
||
|
||
#### 新增功能：长图智能裁剪
|
||
- **问题**: PSD文件可能是非常长的竖图，全部显示会导致预览图过大
|
||
- **解决方案**: 自动裁剪只保留顶部1200px的内容
|
||
|
||
```typescript
|
||
// 新增参数
|
||
maxHeight: number = 1200 // 长图裁剪高度限制
|
||
|
||
// 裁剪逻辑
|
||
if (imageData.height > maxHeight) {
|
||
console.log(`[PSD] 检测到长图 ${imageData.width}x${imageData.height}，裁剪到顶部${maxHeight}px`)
|
||
sharpInstance = sharpInstance.extract({
|
||
left: 0,
|
||
top: 0,
|
||
width: imageData.width,
|
||
height: maxHeight // 只保留顶部1200px
|
||
})
|
||
}
|
||
```
|
||
|
||
#### 优势
|
||
- ✅ 自动识别长图
|
||
- ✅ 保留最重要的顶部内容
|
||
- ✅ 减少文件大小
|
||
- ✅ 提高处理速度
|
||
|
||
---
|
||
|
||
### 2️⃣ **图片处理器增强** (`lib/image-processor.ts`)
|
||
|
||
#### 新增maxHeight参数支持
|
||
```typescript
|
||
interface ProcessImageOptions {
|
||
maxSizeKB?: number // 最大文件大小（KB）
|
||
maxWidth?: number // 最大宽度（像素）
|
||
maxHeight?: number // 🆕 最大高度（像素）
|
||
format?: 'webp' | 'jpeg' | 'png'
|
||
}
|
||
```
|
||
|
||
#### 处理逻辑优化
|
||
```typescript
|
||
const {
|
||
maxSizeKB = 300,
|
||
maxWidth = 600, // 宽度限制
|
||
maxHeight = 1000, // 🆕 高度限制（适配300x500显示）
|
||
format = 'webp',
|
||
} = options
|
||
|
||
// 双向尺寸限制
|
||
if (width > maxWidth) {
|
||
const ratio = maxWidth / width
|
||
width = maxWidth
|
||
height = Math.round(height * ratio)
|
||
}
|
||
|
||
// 新增：如果高度超过限制，再次调整
|
||
if (height > maxHeight) {
|
||
const ratio = maxHeight / height
|
||
height = maxHeight
|
||
width = Math.round(width * ratio)
|
||
}
|
||
```
|
||
|
||
#### 优势
|
||
- ✅ 同时控制宽度和高度
|
||
- ✅ 保持图片比例
|
||
- ✅ 适配300x500显示尺寸
|
||
- ✅ 优化存储空间
|
||
|
||
---
|
||
|
||
### 3️⃣ **首页卡片尺寸调整** (`app/page.tsx`)
|
||
|
||
#### 修改内容
|
||
```typescript
|
||
// 之前：300x300 正方形
|
||
<div className="relative w-full h-[300px] ...">
|
||
|
||
// 现在：300x500 竖版长图
|
||
<div className="relative w-full h-[500px] ...">
|
||
```
|
||
|
||
#### 显示效果
|
||
- **宽度**: 300px（保持不变）
|
||
- **高度**: 300px → **500px** （增加200px）
|
||
- **比例**: 1:1 → **3:5** （更适合纵向素材）
|
||
|
||
#### 优势
|
||
- ✅ 更好展示纵向设计
|
||
- ✅ 减少裁剪损失
|
||
- ✅ 提升视觉效果
|
||
- ✅ 保持网格布局一致
|
||
|
||
---
|
||
|
||
### 4️⃣ **上传API参数更新** (`app/api/materials/upload/route.ts`)
|
||
|
||
#### 更新处理参数
|
||
```typescript
|
||
// PSD自动生成预览图
|
||
processedBuffer = await processImage(generatedBuffer, {
|
||
maxSizeKB: 300,
|
||
maxWidth: 600,
|
||
maxHeight: 1000, // 🆕 添加高度限制
|
||
format: 'webp',
|
||
})
|
||
|
||
// 用户手动上传预览图
|
||
processedBuffer = await processImage(originalBuffer, {
|
||
maxSizeKB: 300,
|
||
maxWidth: 600,
|
||
maxHeight: 1000, // 🆕 添加高度限制
|
||
format: 'webp',
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 技术参数对比
|
||
|
||
| 参数项 | 更新前 | 更新后 | 说明 |
|
||
|--------|--------|--------|------|
|
||
| **首页卡片高度** | 300px | 500px | 增加67% |
|
||
| **显示比例** | 1:1 | 3:5 | 更适合纵向素材 |
|
||
| **图片最大宽度** | 600px | 600px | 不变 |
|
||
| **图片最大高度** | ∞ | 1000px | 新增限制 |
|
||
| **PSD裁剪高度** | 无限制 | 1200px | 新增功能 |
|
||
| **文件大小限制** | 300KB | 300KB | 不变 |
|
||
|
||
---
|
||
|
||
## 🔄 处理流程
|
||
|
||
### PSD文件上传流程
|
||
```
|
||
用户上传PSD文件
|
||
↓
|
||
检测PSD尺寸
|
||
↓
|
||
如果高度 > 1200px → 裁剪到顶部1200px
|
||
↓
|
||
缩放到最大600x1000
|
||
↓
|
||
压缩到300KB以内
|
||
↓
|
||
转换为WebP格式
|
||
↓
|
||
上传到S3
|
||
↓
|
||
首页以300x500显示（等比缩放）
|
||
```
|
||
|
||
### 普通图片上传流程
|
||
```
|
||
用户上传预览图
|
||
↓
|
||
检测图片尺寸
|
||
↓
|
||
如果宽度 > 600px → 缩放
|
||
↓
|
||
如果高度 > 1000px → 再次缩放
|
||
↓
|
||
压缩到300KB以内
|
||
↓
|
||
转换为WebP格式
|
||
↓
|
||
上传到S3
|
||
↓
|
||
首页以300x500显示（object-cover裁剪）
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 视觉效果提升
|
||
|
||
### 之前（300x300）
|
||
- 正方形卡片
|
||
- 纵向素材被强制裁剪
|
||
- 细节损失较多
|
||
- 不够精致
|
||
|
||
### 现在（300x500）
|
||
- 竖版长图卡片
|
||
- 纵向素材完整展示
|
||
- 细节保留更多
|
||
- 视觉效果更佳
|
||
|
||
---
|
||
|
||
## ✅ 部署验证
|
||
|
||
### 容器状态
|
||
```bash
|
||
NAME STATUS PORTS
|
||
flnxi-material Up About a minute 0.0.0.0:4320->3000/tcp
|
||
```
|
||
|
||
### 健康检查
|
||
```json
|
||
{"status":"ok","timestamp":"2025-10-26T08:22:50.838Z"}
|
||
```
|
||
|
||
### 代码验证
|
||
- ✅ PSD处理器包含maxHeight参数（1200px）
|
||
- ✅ 图片处理器包含maxHeight参数（1000px）
|
||
- ✅ 首页卡片高度已更新为500px
|
||
- ✅ 上传API使用新参数
|
||
|
||
---
|
||
|
||
## 📝 使用说明
|
||
|
||
### 对用户的影响
|
||
1. **上传PSD文件**
|
||
- 长图会自动裁剪顶部1200px
|
||
- 无需手动处理
|
||
- 自动优化显示效果
|
||
|
||
2. **上传普通图片**
|
||
- 建议尺寸：600x1000 或按3:5比例
|
||
- 系统自动压缩优化
|
||
- 首页显示效果更佳
|
||
|
||
3. **首页浏览**
|
||
- 卡片显示为300x500
|
||
- 纵向素材展示更完整
|
||
- 视觉体验更好
|
||
|
||
### 最佳实践
|
||
- **横向图片**: 建议尺寸 600x400 或更小
|
||
- **纵向图片**: 建议尺寸 600x1000
|
||
- **PSD文件**: 任意尺寸，系统自动处理
|
||
|
||
---
|
||
|
||
## 🔮 后续优化建议
|
||
|
||
### 短期优化
|
||
- [ ] 添加预览图裁剪位置选择（顶部/中部/底部）
|
||
- [ ] 支持自定义裁剪区域
|
||
- [ ] 提供多种显示比例选项
|
||
|
||
### 长期规划
|
||
- [ ] AI智能识别图片主体并智能裁剪
|
||
- [ ] 支持多张预览图轮播
|
||
- [ ] 动态调整显示尺寸（响应式）
|
||
- [ ] 支持视频预览
|
||
|
||
---
|
||
|
||
## 📞 技术支持
|
||
|
||
### 相关文件
|
||
- `lib/psd-processor.ts` - PSD处理器
|
||
- `lib/image-processor.ts` - 图片处理器
|
||
- `app/page.tsx` - 首页组件
|
||
- `app/api/materials/upload/route.ts` - 上传API
|
||
|
||
### 部署信息
|
||
- **服务器**: NAS TrueNAS
|
||
- **内网地址**: http://192.168.58.20:4320
|
||
- **公网地址**: http://180.97.221.140:2320
|
||
- **容器**: flnxi-material
|
||
|
||
---
|
||
|
||
## 📊 性能影响
|
||
|
||
### 存储优化
|
||
- PSD长图裁剪后文件更小
|
||
- 预览图压缩效率更高
|
||
- S3存储成本降低
|
||
|
||
### 加载速度
|
||
- 图片文件更小，加载更快
|
||
- 首页渲染速度提升
|
||
- 用户体验改善
|
||
|
||
### 服务器负载
|
||
- 处理时间略有增加（裁剪操作）
|
||
- 整体影响可忽略不计
|
||
- 缓存机制保持高效
|
||
|
||
---
|
||
|
||
**更新完成时间**: 2025-10-26 16:26
|
||
**部署人员**: AI Assistant
|
||
**版本**: v1.1.0 - 300x500显示优化
|
||
|
||
|