概述
本站部分文档为 afilmory.xox.im 的英译中版本。
Prep 是来自 Afilmory Prep 融合了自动对焦 (AF)、光圈 (光线控制)、胶片 (复古媒介) 和记忆 (捕捉的瞬间)。
一个使用 React + TypeScript 构建的现代照片画廊网站，支持从多个存储源 (S3、GitHub) 自动同步照片，具有高性能 WebGL 渲染、瀑布流布局、EXIF 信息显示、缩略图生成等功能。
在线照片画廊示例：
🌟 特性
核心功能
- 🖼️ 高性能 WebGL 图像渲染器 - 自定义 WebGL 组件，支持流畅的缩放和平移操作
- 📱 响应式瀑布流布局 - 基于 Masonic 实现，适配不同屏幕尺寸
- 🎨 现代 UI 设计 - 使用 Tailwind CSS 和 Radix UI 组件库构建
- ⚡ 增量同步 - 智能变化检测，仅处理新增或修改的照片
- 🌐 国际化支持 - 多语言支持
- 🔗 OpenGraph 集成 - 社交媒体分享的 OpenGraph 元数据
图像处理
- 🔄 HEIC/HEIF 格式支持 - 自动转换苹果设备 HEIC 格式
- 📷 TIFF 格式支持 - 自动转换 TIFF 格式
- 🖼️ 智能缩略图生成 - 多尺寸缩略图，优化加载性能
- 📊 EXIF 信息显示 - 完整的拍摄参数，包括相机型号、焦距、光圈等
- 🌈 Blurhash 占位符 - 优雅的图像加载体验
- 📱 Live Photo 支持 - 检测和显示 iPhone Live Photos
- ☀️ HDR 图像支持 - 显示 HDR 图像
高级特性
- 🎛️ 富士胶片配方 - 读取和显示富士相机胶片模拟设置
- 🔍 全屏查看器 - 支持手势的图像查看器
- 🏷️ 文件系统标签 - 基于文件系统自动生成标签
- ⚡ 并发处理 - 多进程/多线程并发处理支持
- 🗂️ 多存储支持 - S3、GitHub 等存储后端
- 📷 分享图像 - 分享图像到社交媒体或嵌入 iframe 到您的网站
- 🗺️ 交互式地图浏览器 - 使用 MapLibre 基于 EXIF 数据中的 GPS 坐标进行照片地理可视化
🏗️ 技术架构
前端技术栈
- React 19 - 最新版本的 React 与编译器
- TypeScript - 完整的类型安全
- Vite - 现代构建工具
- Tailwind CSS - 原子化 CSS 框架
- Radix UI - 无障碍组件库
- Jotai - 状态管理
- TanStack Query - 数据获取和缓存
- React Router 7 - 路由管理
- i18next - 国际化
构建系统
- Node.js - 服务端运行时
- Sharp - 高性能图像处理
- AWS SDK - S3 存储操作
- Worker Threads/Cluster - 并发处理
- EXIF-Reader - EXIF 数据提取
存储架构
采用适配器模式设计，支持多种存储后端：
- S3 兼容存储 - AWS S3、MinIO、阿里云 OSS 等
- GitHub 存储 - 使用 GitHub 仓库作为图像存储
📄 许可证
MIT 许可证 © 2025 Innei
如果这个项目对您有帮助，请给它一个 ⭐️ 星标支持！
| 创建时间 | |
| 修改时间 |