影瞬 (Shadow Snap)

使用”背景切割”技法生成电影质感的多行字幕长图。纯前端实现、即开即用，支持国际化与品牌化展示。

✨ 特性

• 切割感背景：逐行从原图底部切片，视觉连续且具电影感
• 多行字幕：回车换行自动新增行
• 水印系统：文本水印，支持位置/透明度/大小/颜色
• 国际化 (i18n)：中文/英文即时切换，UI文案随语言更新
• 设计主题：Cinema Noir Puzzle（胶片颗粒、霓虹渐变、拼图切割元素）
• 品牌整合：页脚内联 Shadow.Nexus / Shadow Card 链接及 LOGO
• 微信公众号：悬浮显示二维码提示层
• 隐私友好：纯浏览器端处理，图片不上传服务器

🖥️ 使用方法

1. 打开 index.html（推荐 Chrome / Edge / Safari）
2. 点击左侧预览区域或拖拽图片进入
3. 在右侧输入字幕，按 Enter 换行
4. 调整字号、字幕高度、安全边距、字体颜色/描边、水印等
5. 点击“保存图片”下载生成结果

🧩 界面要点

• 语言切换：右上角下拉（zh/en）
• 预览区：支持点击上传、拖拽上传、拖入高亮
• 字幕：自动水平居中，支持多语言字体（Noto Sans 系列 + Roboto）
• 水印：开关、位置（四角/居中）、不透明度、大小、颜色
• 页脚：Shadow.Nexus 与 Shadow Card 链接（含 16px LOGO）；微信公众号悬浮二维码

📦 目录结构（关键项）

• index.html：页面骨架与资源引入
• style.css：设计系统与动效（主题变量、胶片颗粒、悬浮弹层等）
• script.js：核心渲染逻辑（Canvas 拼接、文本绘制、水印、i18n）
• public/brand_assets/：产品与品牌 LOGO 资源
• public/wxgzh.jpg：微信公众号二维码

🧪 本地开发

• 直接双击 index.html 即可使用
• 或使用任意静态服务器（示例）：

  npx serve .

🚀 部署（GitHub → Vercel）

• 将仓库推送到 GitHub（本项目已配置）
• 通过 Vercel 连接 GitHub 仓库，启用自动部署
• 每次 push 到默认分支将自动触发构建与上线

如需 GitHub Pages 方案：将站点打包后放入 gh-pages 分支或配置 Pages 指向根目录/docs 目录（本项目为纯静态，无后端依赖）。

🔒 隐私说明

• 所有处理在浏览器本地完成，不会上传图片或文本到任何服务器

📝 变更摘要

• 1.0.0：首个版本
• 1.1.0：品牌升级、设计系统重构、i18n、水印增强、页脚品牌整合、公众号悬浮二维码

---

由 Antigravity 协助开发