照片年代感修复应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

照片年代感修复是一款创意工具应用，为现代照片添加复古滤镜效果。支持80/90年代风格、颗粒感、复古边框等多种特效，让用户一键回到过去，重温怀旧时光。应用内置多种年代风格预设，支持参数自定义调整，打造独特的复古照片。

应用以温暖的棕色为主色调，象征岁月的沉淀与怀旧的情感。涵盖照片编辑、滤镜管理、处理相册、关于信息四大模块。用户可以选择年代风格、应用滤镜效果、调整参数、添加边框和特效，快速生成复古风格照片。

1.2 核心功能

功能模块	功能描述	实现方式
年代风格	6种年代风格预设	枚举定义
滤镜效果	6种复古滤镜效果	颜色处理
参数调整	亮度、对比度、饱和度	滑块控制
颗粒感	4级颗粒强度调节	噪点叠加
边框样式	6种复古边框样式	自定义绘制
暗角效果	4级暗角强度调节	渐变叠加

1.3 年代风格定义

序号	年代名称	Emoji	描述
1	80年代	📼	胶片质感，温暖色调
2	90年代	📺	复古滤镜，柔和颗粒
3	00年代	💾	数码早期，低饱和
4	70年代	🎞️	怀旧棕褐，经典复古
5	60年代	📻	黑白经典，艺术质感
6	50年代	📽️	老照片风，岁月痕迹

1.4 滤镜效果定义

序号	滤镜名称	Emoji	强度	描述
1	复古棕褐	🟤	0.8	经典怀旧色调
2	褪色怀旧	🌫️	0.6	岁月沉淀感
3	温暖阳光	☀️	0.7	温馨回忆风
4	冷调胶片	❄️	0.5	文艺清新感
5	高对比度	⬛	0.9	戏剧性效果
6	经典复古	📷	0.75	百搭复古风

1.5 颗粒强度定义

序号	强度名称	Emoji	数值
1	无	⬜	0.0
2	轻微	🔘	0.15
3	中等	⚫	0.3
4	强烈	⬛	0.5

1.6 边框样式定义

序号	边框名称	Emoji	描述
1	无边框	🖼️	无边框效果
2	拍立得	📸	经典拍立得边框
3	胶片边框	🎞️	胶片卷轴边框
4	复古相框	🏛️	精致复古相框
5	撕裂边缘	📄	撕裂纸张效果
6	圆角边框	⭕	圆角矩形边框

1.7 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
自定义绘制	CustomPainter	-
渐变效果	Shader	-
目标平台	鸿蒙OS / Web	API 21+

1.8 项目结构

lib/
└── main_vintage_photo_restoration.dart
    ├── VintagePhotoRestorationApp    # 应用入口
    ├── VintageEra                    # 年代风格枚举
    ├── FilterType                    # 滤镜效果枚举
    ├── GrainLevel                    # 颗粒强度枚举
    ├── FrameStyle                    # 边框样式枚举
    ├── VignetteLevel                 # 暗角强度枚举
    ├── PhotoFilter                   # 照片滤镜模型
    ├── ProcessedPhoto                # 处理照片模型
    ├── VintagePhotoRestorationHomePage # 主页面（底部导航）
    ├── _buildEditorPage              # 编辑页面
    ├── _buildFiltersPage             # 滤镜页面
    ├── _buildGalleryPage             # 相册页面
    ├── _buildProfilePage             # 关于页面
    ├── VintagePreviewPainter         # 预览绘制器
    └── FramePainter                  # 边框绘制器

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 照片处理流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 年代风格枚举 (VintageEra)

enum VintageEra {
  eighties(label: '80年代', emoji: '📼', description: '胶片质感，温暖色调'),
  nineties(label: '90年代', emoji: '📺', description: '复古滤镜，柔和颗粒'),
  twoThousands(label: '00年代', emoji: '💾', description: '数码早期，低饱和'),
  seventies(label: '70年代', emoji: '🎞️', description: '怀旧棕褐，经典复古'),
  sixties(label: '60年代', emoji: '📻', description: '黑白经典，艺术质感'),
  fifties(label: '50年代', emoji: '📽️', description: '老照片风，岁月痕迹');

  final String label;
  final String emoji;
  final String description;
}

3.1.2 滤镜效果枚举 (FilterType)

enum FilterType {
  sepia(label: '复古棕褐', emoji: '🟤', intensity: 0.8),
  fade(label: '褪色怀旧', emoji: '🌫️', intensity: 0.6),
  warm(label: '温暖阳光', emoji: '☀️', intensity: 0.7),
  cool(label: '冷调胶片', emoji: '❄️', intensity: 0.5),
  contrast(label: '高对比度', emoji: '⬛', intensity: 0.9),
  vintage(label: '经典复古', emoji: '📷', intensity: 0.75);

  final String label;
  final String emoji;
  final double intensity;
}

3.1.3 照片滤镜模型 (PhotoFilter)

class PhotoFilter {
  final String id;              // 滤镜ID
  final String name;            // 滤镜名称
  final VintageEra era;         // 年代风格
  final FilterType filter;      // 滤镜效果
  final GrainLevel grain;       // 颗粒强度
  final FrameStyle frame;       // 边框样式
  final VignetteLevel vignette; // 暗角强度
  final double brightness;      // 亮度
  final double contrast;        // 对比度
  final double saturation;      // 饱和度
  final DateTime createdAt;     // 创建时间
}

3.1.4 处理照片模型 (ProcessedPhoto)

class ProcessedPhoto {
  final String id;              // 照片ID
  final String originalPath;    // 原始路径
  final String processedPath;   // 处理后路径
  final PhotoFilter filter;     // 应用的滤镜
  final DateTime processedAt;   // 处理时间
}

3.1.5 年代风格分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 编辑页结构

3.2.3 照片预览结构

3.2.4 滤镜页结构

3.3 滤镜处理逻辑

3.4 边框绘制逻辑

---

四、UI设计规范

4.1 配色方案

应用以温暖的棕色为主色调，象征岁月的沉淀与怀旧的情感：

颜色类型	色值	用途
主色	#8D6E63 (Brown)	导航、主题元素
辅助色	#A1887F	滤镜页面
第三色	#BCAAA4	相册页面
强调色	#D7CCC8	关于页面
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	滤镜卡片

4.2 年代基础色调

年代	色值	视觉效果
50年代	#8B7355	老照片棕褐
60年代	#696969	黑白经典
70年代	#CD853F	怀旧金黄
80年代	#DEB887	胶片暖色
90年代	#D2B48C	柔和米色
00年代	#A9A9A9	数码灰色

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
滤镜名称	16px	Bold	#000000
年代标签	12px	Regular	白色
参数数值	12px	Regular	灰色
统计数字	20px	Bold	白色

4.4 组件规范

4.4.1 年代选择卡片

┌─────────────────────────────────────┐
│  选择年代风格                        │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │  📼  │ │  📺  │ │  💾  │        │
│  │80年代│ │90年代│ │00年代│        │
│  │胶片  │ │复古  │ │数码  │        │
│  └──────┘ └──────┘ └──────┘        │
└─────────────────────────────────────┘

4.4.2 滤镜选择芯片

┌─────────────────────────────────────┐
│  滤镜效果                            │
│                                     │
│  [🟤 复古棕褐] [🌫️ 褪色怀旧]        │
│  [☀️ 温暖阳光] [❄️ 冷调胶片]        │
│  [⬛ 高对比度] [📷 经典复古]        │
└─────────────────────────────────────┘

4.4.3 参数调整滑块

┌─────────────────────────────────────┐
│  参数调整                            │
│                                     │
│  亮度   ────────●───────────  0.00  │
│  对比度 ───────────●────────  1.00  │
│  饱和度 ──────●─────────────  0.80  │
└─────────────────────────────────────┘

4.4.4 照片预览区域

┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │         📼                  │   │
│  │                             │   │
│  │                             │   │
│  │              ┌────────────┐ │   │
│  │              │ 📼 80年代  │ │   │
│  └──────────────┴────────────┘─┘   │
└─────────────────────────────────────┘

4.4.5 特效选项下拉

┌─────────────────────────────────────┐
│  特效选项                            │
│                                     │
│  颗粒感      边框样式    暗角效果    │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │⚫ 中等▼│ │📸拍立得▼│ │🌑 轻微▼│  │
│  └────────┘ └────────┘ └────────┘  │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 年代风格预览实现

class VintagePreviewPainter extends CustomPainter {
  final VintageEra era;
  final FilterType filter;
  final GrainLevel grain;
  final VignetteLevel vignette;

  @override
  void paint(Canvas canvas, Size size) {
    final baseColor = _getEraBaseColor(era);
    final filterColor = _getFilterColor(filter);

    // 绘制基础背景
    final bgPaint = Paint()..color = baseColor;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), bgPaint);

    // 叠加滤镜效果
    final gradientPaint = Paint()
      ..shader = LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          baseColor.withValues(alpha: 0.8),
          filterColor.withValues(alpha: 0.6),
          baseColor.withValues(alpha: 0.9),
        ],
      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), gradientPaint);

    // 添加颗粒感
    if (grain.value > 0) {
      _drawGrain(canvas, size);
    }

    // 添加暗角
    if (vignette.value > 0) {
      _drawVignette(canvas, size);
    }
  }
}

5.2 颗粒感绘制实现

void _drawGrain(Canvas canvas, Size size) {
  final random = Random(42);
  final grainPaint = Paint()..color = Colors.white.withValues(alpha: grain.value * 0.3);

  for (int i = 0; i < 500; i++) {
    final x = random.nextDouble() * size.width;
    final y = random.nextDouble() * size.height;
    canvas.drawCircle(Offset(x, y), 1, grainPaint);
  }
}

5.3 暗角效果绘制实现

void _drawVignette(Canvas canvas, Size size) {
  final center = Offset(size.width / 2, size.height / 2);
  final radius = size.width > size.height ? size.width : size.height;

  final vignettePaint = Paint()
    ..shader = RadialGradient(
      center: Alignment.center,
      radius: 1.0,
      colors: [
        Colors.transparent,
        Colors.black.withValues(alpha: vignette.value),
      ],
      stops: const [0.5, 1.0],
    ).createShader(Rect.fromCircle(center: center, radius: radius));

  canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), vignettePaint);
}

5.4 边框绘制实现

class FramePainter extends CustomPainter {
  final FrameStyle frameStyle;

  @override
  void paint(Canvas canvas, Size size) {
    switch (frameStyle) {
      case FrameStyle.polaroid:
        _drawPolaroidFrame(canvas, size);
        break;
      case FrameStyle.film:
        _drawFilmFrame(canvas, size);
        break;
      case FrameStyle.vintage:
        _drawVintageFrame(canvas, size);
        break;
      // ... 其他边框样式
    }
  }

  void _drawPolaroidFrame(Canvas canvas, Size size, Paint paint) {
    final frameWidth = 20.0;
    final bottomExtra = 40.0;

    canvas.drawRect(
      Rect.fromLTWH(
        -frameWidth,
        -frameWidth,
        size.width + frameWidth * 2,
        size.height + frameWidth * 2 + bottomExtra,
      ),
      paint..style = PaintingStyle.fill,
    );
  }
}

5.5 照片处理实现

void _processPhoto() {
  setState(() {
    _isProcessing = true;
  });

  Future.delayed(const Duration(seconds: 2), () {
    final filter = PhotoFilter(
      id: 'filter_${DateTime.now().millisecondsSinceEpoch}',
      name: '${_selectedEra.label}风格',
      era: _selectedEra,
      filter: _selectedFilter,
      grain: _selectedGrain,
      frame: _selectedFrame,
      vignette: _selectedVignette,
      brightness: _brightness,
      contrast: _contrast,
      saturation: _saturation,
    );

    final photo = ProcessedPhoto(
      id: 'photo_${DateTime.now().millisecondsSinceEpoch}',
      originalPath: 'new_photo.jpg',
      processedPath: 'processed_new.jpg',
      filter: filter,
    );

    setState(() {
      _processedPhotos.insert(0, photo);
      _isProcessing = false;
    });
  });
}

---

六、交互设计

6.1 编辑流程

6.2 滤镜应用流程

6.3 相册浏览流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 真实照片处理

处理功能：

• 图片选择器集成
• 像素级滤镜处理
• GPU加速渲染
• 高分辨率支持

7.2.2 AI智能修复

AI功能：

• 自动年代识别
• 智能滤镜推荐
• 人脸优化
• 场景适配

7.2.3 社交分享

分享功能：

• 一键分享到社交平台
• 水印添加
• 批量导出
• 云端备份

---

八、注意事项

8.1 开发注意事项

1. 性能优化：实时预览需优化渲染性能

2. 内存管理：大量照片处理需注意内存释放

3. 图片质量：处理过程需保持图片质量

4. 自定义绘制：CustomPainter需正确实现shouldRepaint

5. 状态管理：参数调整需及时更新预览

8.2 常见问题

问题	原因	解决方案
预览卡顿	重绘范围大	局部重绘优化
颜色偏差	色彩空间问题	统一色彩空间
边框显示异常	尺寸计算错误	检查边界条件
颗粒感不明显	透明度太低	调整alpha值
暗角效果异常	渐变范围错误	调整半径参数

8.3 使用技巧

📸 复古照片制作技巧 📸

年代风格选择

• 80年代：适合彩色照片，胶片质感
• 90年代：适合人像照片，柔和自然
• 70年代：适合风景照片，怀旧氛围
• 60年代：适合艺术创作，黑白经典

滤镜搭配建议

• 复古棕褐 + 中等颗粒 = 经典老照片
• 褪色怀旧 + 轻微暗角 = 岁月沉淀感
• 温暖阳光 + 拍立得边框 = 温馨回忆
• 冷调胶片 + 胶片边框 = 文艺清新

参数调整技巧

• 降低饱和度增加年代感
• 适当降低对比度更柔和
• 添加颗粒感增强质感
• 暗角突出照片主体

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_vintage_photo_restoration.dart --web-port 8139

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_vintage_photo_restoration.dart

# 代码分析
flutter analyze lib/main_vintage_photo_restoration.dart

---

十、总结

照片年代感修复应用通过照片编辑、滤镜管理、处理相册、关于信息四大模块，为用户提供了一个便捷的复古照片制作平台。应用支持6种年代风格、6种滤镜效果、4级颗粒强度、6种边框样式，让用户一键回到过去，重温怀旧时光。

核心功能涵盖年代风格选择、滤镜效果应用、参数调整、特效添加四大模块。年代风格从50年代到00年代，覆盖半个世纪的影像风格；滤镜效果包括复古棕褐、褪色怀旧、温暖阳光等多种选择；参数调整支持亮度、对比度、饱和度精细控制；特效选项包含颗粒感、边框样式、暗角效果。

应用采用 Material Design 3 设计规范，以温暖的棕色为主色调，象征岁月的沉淀与怀旧的情感。通过本应用，希望能够帮助用户轻松制作复古风格照片，记录美好回忆，重温怀旧时光。

照片年代感修复——一键回到过去

---