一款简洁优雅的图片边框添加工具，为您的照片自动添加精美的底部边框，并智能显示相机 EXIF 信息。
本项目是 OneFrame 的 NAS/Docker 移植版本，从 Electron 桌面应用迁移为纯前端 Web 应用，通过 Docker 容器化部署在 NAS 上，局域网内设备可通过浏览器访问。
- 自动识别相机厂商并显示对应 Logo
- 提取并展示拍摄参数（光圈、快门、ISO、焦距）
- 自动读取拍摄时间和设备型号
支持 12 种边框样式：
- Type A：白色下边框 - 可调节边框高度（5%-30%），完整编辑面板
- Type B：黑色下边框 - 正方形画布，图片居左，右侧显示参数和 Logo
- Type C：横向布局 - Logo 在左侧，参数在右侧，纵向图片自动缩放字体
- Type D：横向布局 - Logo 居中，左侧时间+机型，右侧参数+署名
- Type E：3:2 纵向 - 顶部 1:1 正方形图片，底部白色区域显示参数，支持拖动裁剪
- Type F：画中画 - 上方白色留白 + 中部照片展示区 + 底部文字信息区，字号动态缩放
- Type G：画中画 - 白色背景 + 居中 Logo + 日期|参数|机型 + 署名，支持纵向图片自适应
- Type H：全画幅叠加 - 照片 100% 填满画布，Logo 和文字叠加在照片底部，支持文字颜色选择
- Type I：极简叠加 - 照片 100% 填满画布，Logo 顶部居中，底部仅署名（默认 "OneFrame"），纵向图片字号增大 50%
- Type J：署名+三栏参数 - 照片 100% 填满画布，署名+参数行三栏布局（左机型/中参数/右时间），机型含厂商名
- Type K：左下角 Logo + 双行文字 - Logo 底部左下角，右侧署名+日期 / 机型+参数，字重区分
- Type L：高斯模糊背景 - 照片高斯模糊外框 + 清晰照片居中 + 白色文字
- Type M：模糊边框+顶部Logo - 四边模糊背景各5%，清晰照片居中90%，底部署名+参数行
- Logo 显示开关
- 拍摄参数显示开关
- 拍摄时间显示开关
- 支持自定义署名
- 边框颜色和高度自定义
- 文字颜色选择（Type H/I/J）
- 导出时自动保留原图 EXIF 信息
- 支持 JPG 高质量输出
支持以下相机厂商的 Logo 和信息识别： Apple、Canon、DJI、Fujifilm、Google、GoPro、Hasselblad、Leica、Lumix、Nikon、Nokia、Olympus、Oneplus、Pentax、Ricoh、Sigma、Sony、Vivo、Xiaomi 等
| 模块 | 原始方案 | NAS 方案 | 说明 |
|---|---|---|---|
| 运行环境 | Electron 28.0 | Nginx + Docker | 纯前端 Web 应用 |
| 前端 | 原生 HTML/CSS/JS | 原生 HTML/CSS/JS | 零构建方案，无需 Node.js |
| 图片预览 | CSS 渲染 | CSS 渲染 | 实时预览边框效果 |
| EXIF 读取 | exifreader | exifreader | 本地加载，无需 CDN |
| EXIF 写入 | piexifjs | piexifjs | 保留原图 EXIF 数据 |
| 字体渲染 | opentype.js | opentype.js | 精确字体渲染 |
| 部署 | electron-builder | Docker Compose | 一行命令部署 |
| 文件选择 | Electron 对话框 | <input type="file"> |
浏览器原生 File API |
| 文件保存 | Electron 对话框 | <a download> |
浏览器原生下载 |
- 移除 Electron 依赖：删除
window.electronAPI分支，统一使用浏览器原生 API - 本地化 CDN 资源：Font Awesome 和 opentype.js 从 CDN 下载到本地
assets/目录 - 修复样式类名管理：统一所有预览模块的
updateFrameWrapper()和reset()类名清理逻辑 - 修复 EXIF 时间解析：匹配已格式化的日期格式
- Docker 镜像优化：排除 exifreader 源码等不必要的文件
- Docker
- Docker Compose
# 克隆项目
git clone https://github.com/IceyVanci/OneFrame-nas.git
cd OneFrame-nas
# 构建并启动（后台运行）
docker compose up --build -d从 GitHub Releases 下载预编译镜像文件，无需本地构建：
# 下载镜像文件（在 Release 页面下载 .tar 文件）
# 导入镜像
docker load -i oneframe-web-v1.08-nas.tar
# 运行容器
docker run -d -p 8888:80 --name oneframe-web --restart unless-stopped oneframe-nas-oneframe:latest- Fork 本仓库到你的 GitHub 账号
- 登录 dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git
- 选择 Fork 的仓库，配置构建设置：
- Build command：留空
- Build output directory：
src/renderer
- 点击 Save and Deploy
- 部署完成后会分配
*.pages.dev域名，可在 Custom domains 中修改子域名或绑定自定义域名
- Fork 本仓库到你的 GitHub 账号
- 登录 app.netlify.com → Add new site → Import an existing project
- 选择 Fork 的仓库，配置构建设置：
- Build command：留空
- Publish directory：
src/renderer
- 点击 Deploy site
- 部署完成后可在 Site settings → Change site name 修改域名
在局域网内任何设备的浏览器中访问：
http://<NAS的IP地址>:8888
# 查看容器状态
docker compose ps
# 查看日志
docker compose logs -f
# 停止服务
docker compose down
# 重新构建并启动（代码更新后）
docker compose up --build -d打开浏览器访问应用后，点击首页的样式卡片。 所有 13 种样式（Type A-M）同时显示在首页图片墙中
选择样式后，系统会弹出文件选择器，选择要处理的图片。
在右侧编辑面板中，您可以：
- 调整边框颜色和高度
- 选择是否显示相机 Logo
- 编辑或自动填充拍摄参数
- 添加自定义署名
- 设置拍摄时间
- 选择文字颜色（Type H）
点击"保存"或"导出"按钮，图片将自动下载到本地。
默认端口为 8888，可在 docker-compose.yml 中修改：
ports:
- "8888:80" # 修改左侧数字即可边框高度默认设置为图片短边的 12%，可在 5%-30% 范围内调整。
- 浅色边框背景：使用原始 Logo
- 深色边框背景：深色 Logo 自动转换为白色
- Make: 相机厂商
- Model: 相机型号
- DateTimeOriginal: 拍摄时间
- FNumber: 光圈值
- ExposureTime: 快门速度
- ISOSpeedRatings: ISO 感光度
- FocalLength/FocalLengthIn35mmFilm: 焦距
无需 Node.js 或构建工具，直接使用 HTTP 服务器：
# 使用 npx serve（需要 Node.js）
npx serve src/renderer
# 或使用 Python
python -m http.server 3000 -d src/renderer
# 或使用 Docker
docker compose up --build- 准备 Logo 文件（SVG 格式）
- 将文件放入
src/renderer/logos/目录 - 文件命名规范：
{厂商名}.svg（如Sony.svg） - 在
src/renderer/js/logo-utils.js的logoList数组中添加厂商名称
- 在
src/renderer/index.html中添加新的样式卡片 - 在
src/renderer/css/中添加对应的 CSS 样式文件 - 在
src/renderer/js/styles/中添加预览和导出模块 - 在
src/renderer/js/styles/index.js中注册新样式
本项目基于 MIT 许可证开源。
- CHANGELOG.md - 更新日志
- docs/AI_PROJECT_GUIDE.md - AI 项目认知指南
- docs/function_analysis.md - 函数分析文档
- docs/migration-guide.md - Electron → Docker 移植指南
- docs/V1.11-NAS_CHANGES.md - v1.11 同步变更（Type M + 圆角 + 模糊修复）
- docs/V1.10-NAS_CHANGES.md - v1.10 同步变更（编辑器动态背景色）
- docs/V1.09-NAS_CHANGES.md - v1.09 同步变更（图片墙重构+文件名大写化）
- docs/V1.08-NAS_CHANGES.md - v1.08 同步变更（Type K/L）
- docs/V1.07-NAS_CHANGES.md - v1.07 同步变更（Type I/J）
- docs/V1.06-NAS_CHANGES.md - v1.06 同步变更（Type H）
- docs/release-v1.06-nas.md - v1.06 Release 说明
- docs/V1.05-NAS_CHANGES.md - v1.05 同步变更（Type F/E/G）
- docs/V1.04_CHANGES.md - v1.04 Type F 缩放修复
- docs/V1.03-NAS_CHANGES.md - v1.03 Type F 同步
- OneFrame - 原始 Electron 桌面应用
- exifreader - EXIF 信息读取
- piexifjs - EXIF 信息写入
- opentype.js - 字体渲染
- Copicseal - 可图匠，部分代码逻辑来自 Copicseal
- Font Awesome - 图标库
- MiSans - 小米 MiSans 字体
- Xiaomi MiMo - Xiaomi MiMo Orbit-百万亿 Token 创造者激励计划