ChronoFrame：在线个人相册，支持 S3 兼容存储、LivePhoto、EXIF 解析、照片地图、在线管理照片等

本文更新于: 2025年9月19日

在线照片管理和相册应用，瀑布流式相册、Live Photo 支持、智能 EXIF 解析、地理位置识别和探索地图

本项目灵感来自Afilmory，Afilmory 是一个非常优秀的项目，其部署方式是在本地或 CI 中处理存储中的照片并生成清单文件，然后前端通过读取清单文件来展示照片，静态属于部署。 ChronoFrame 封装了一个动态的照片管理应用，提供在线上传、管理和浏览照片的功能，适合需要间隔更新照片的场景。

项目截图

项目特性

🖼️ 强大的图片管理

• 在线管理照片 – 通过 Web 界面轻松管理和浏览照片
• 探索地图 – 在地图上浏览照片拍摄位置
• 智能 EXIF 解析 – 自动提取拍摄时间、地理位置、相机参数等元数据
• 地理位置识别 – 自动识别(Reverse Geocoding)照片拍摄地点
• 多格式支持 – 支持 JPEG、PNG、HEIC/HEIF 等主流图片格式
• 智能缩略图 – 基于 ThumbHash 技术的高效缩略图生成

🔧 现代技术栈

• Nuxt 4 – 基于最新的 Nuxt 框架，提供 SSR/SSG 支持
• TypeScript – 完整的类型安全保障
• TailwindCSS – 现代化的 CSS 框架
• Drizzle ORM – 类型安全的数据库 ORM

☁️ 灵活的存储方案

• 多存储后端 – 支持 S3 兼容存储、GitHub(WIP)、本地文件系统(WIP) 等
• CDN 加速 – 可配置 CDN 地址加速图片访问

🐳 部署

推荐使用预构建的 docker 镜像部署，在 ghcr 上查看镜像

Docker

修改命令中的环境变量后运行：

docker run -d \
  --name chronoframe \
  -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  -e CFRAME_ADMIN_EMAIL="" \
  -e CFRAME_ADMIN_NAME="" \
  -e CFRAME_ADMIN_PASSWORD="" \
  -e NUXT_PUBLIC_APP_TITLE="" \
  -e NUXT_PUBLIC_APP_SLOGAN="" \
  -e NUXT_PUBLIC_APP_AVATAR_URL="" \
  -e NUXT_STORAGE_PROVIDER="s3" \
  -e NUXT_PROVIDER_S3_ENDPOINT="" \
  -e NUXT_PROVIDER_S3_BUCKET="chronoframe" \
  -e NUXT_PROVIDER_S3_REGION="auto" \
  -e NUXT_PROVIDER_S3_ACCESS_KEY_ID="" \
  -e NUXT_PROVIDER_S3_SECRET_ACCESS_KEY="" \
  -e NUXT_PROVIDER_S3_PREFIX="photos/" \
  -e NUXT_PROVIDER_S3_CDN_URL="" \
  -e NUXT_OAUTH_GITHUB_CLIENT_ID="" \
  -e NUXT_OAUTH_GITHUB_CLIENT_SECRET="" \
  -e NUXT_SESSION_PASSWORD="" \
  -e MAPBOX_TOKEN="" \
  ghcr.io/hoshinosuzumi/chronoframe:latest

Docker Compose

创建 .env 文件

# Admin user email (required)
CFRAME_ADMIN_EMAIL=
# Admin user name (default to Chronoframe, optional)
CFRAME_ADMIN_NAME=
# Admin user password (default to CF1234@!, optional)
CFRAME_ADMIN_PASSWORD=

# 应用标题与口号
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AVATAR_URL=

# 存储配置（使用 S3）
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=

# 会话密码（必须设置，建议为一个随机长字符串）
NUXT_SESSION_PASSWORD=

# GitHub OAuth
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

# Mapbox Token
MAPBOX_TOKEN=

创建 docker-compose.yml：

services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./data:/app/data
    env_file:
      - .env

启动：

docker-compose up -d

使用指南

上传照片

1. 点击图片跳转到 GitHub 认证登录
2. 访问仪表板页面/dashboard
3. 在Photos页面中图片选择并点击上传（支持批量上传和拖拽上传）
4. 系统将自动提取EXIF信息、生成少数并逆编码照片断层

项目地址