分镜盒子 ShotBox - 网格图片智能切图工具

---

✨ 功能特性

• 🔒 纯前端本地处理：所有图像计算与裁剪均在浏览器内部完成，数据绝不上传云端，彻底杜绝隐私与数据泄露隐患。
• 🎯 灵活网格切分：支持从 1×1 到 10×10 的任意行列自定义等分，轻松应对九宫格、十六宫格等不同规格素材。
• ⚡ 常用快捷预设：一键设置常见布局（如 3×3、4×4、3×4、4×3），无需手动重复键入。
• 👁️ 动态交互与实时预览：
  • 上传后即时显示图片尺寸与单块切片像素规格及总块数。
  • 动态渲染等分网格辅助线，所见即所得。
• 📦 ZIP 打包批量导出：多张切片异步渲染与打包，配备精细的百分比进度条，一键打包下载。
• 🌐 国际化多语言支持：内置 简体中文 与 English 双语切换，自动记忆用户语言偏好。
• 🌓 深色/浅色主题：精心调校的 Dark / Light 现代玻璃拟态（Glassmorphism）设计，支持一键切换并自动保存偏好。
• 🧭 新手引导漫游：集成 Driver.js 步骤引导，首次使用即可轻松上手。
• 📱 全平台响应式：完美自适应桌面端、平板与手机屏幕，移动端同样体验流畅。

---

🎬 适用场景

场景	说明
📱 表情包拆解	将微信/微博九宫格或十六宫格表情包一键切分为独立图片
🎬 影视分镜整理	快速分割故事板（Storyboard）与多镜头排布稿，便于逐镜查看分析
🎨 设计与切图	UI/UX 设计师对图标合集（Sprite）、栅格排版原型的快速分解
📸 社交媒体九宫格	制作发朋友圈、微博等平台拼图或还原多图排版素材
📊 数据图表提取	从矩阵排列的科研/商业图表截图中逐个分离单独模块

---

📖 使用说明

1. 上传图片

• 支持拖拽本地图片到虚线框内，或点击「选择文件」上传。
• 支持格式：PNG、JPG / JPEG、WebP（建议文件大小在 20MB 以内）。

2. 调整切分网格

• 手动设置：输入目标行数（Rows）与列数（Cols），范围在 1 ~ 10 之间。
• 预设按钮：直接点击快捷预设（如 3×3、4×4 等）。
• 实时预览：中间画布将即时绘制紫蓝色切分线，并在底部提示「图片原始尺寸」和「每块切片尺寸」。

3. 一键切分并导出

• 点击 「开始切分」 按钮，系统将在后台逐块渲染并生成切片。
• 切分完成后，点击 「下载 ZIP 文件」 即可保存压缩包。
• 导出的文件以 row_{行号}_col_{列号}.png 格式规范命名，解压即可直接使用。

---

🗂️ 项目结构

shotboxcn/
├── index.html            # 主页面结构与语义化标签、SEO与社交分享元数据
├── style.css             # 现代暗黑/明亮主题样式、毛玻璃动效与响应式布局
├── app.js                # 核心逻辑：Canvas切图、ZIP生成、i18n国际化与指引
├── example.png           # 项目演示截图
├── og-image.png          # Open Graph 社交媒体分享卡片
├── favicon.png           # 站点图标与移动端快捷图标
├── robots.txt            # 搜索引擎爬虫协议
├── sitemap.xml           # 站点地图
└── README.md             # 项目说明文档

---

🛠️ 技术栈

• 原生 HTML5 + CSS3：采用 CSS Variables 实现主题无缝切换，采用弹性网格与 Glassmorphism 设计语言。
• 原生 JavaScript (ES6+)：无冗余框架依赖，体积轻量，首屏毫秒级加载。
• HTML5 Canvas API：高性能纯客户端像素级图形绘制与无损裁切。
• JSZip：纯前端将图片流直接打包为标准 .zip 压缩档案。
• Driver.js：轻量友好的全屏指引与交互漫游组件。
• Inter Font：现代化英文排版衬线字体。

---

🚀 本地运行与开发

本工具为纯静态页面，无需任何后端服务或编译步骤。

方式一：直接运行

直接双击并在现代浏览器中打开 index.html 即可使用完整功能。

方式二：本地静态服务（推荐）

为了获得更好的本地资源加载与调试体验，建议通过本地 HTTP 服务启动：

# 使用 Python 3
python -m http.server 8080

# 或使用 Node.js
npx serve .
# 或
npx http-server -p 8080

启动后在浏览器中访问：http://localhost:8080

---

🚢 部署说明

项目可零配置部署在任何静态托管平台：

• GitHub Pages：进入仓库 Settings -> Pages，选择分支 master 根目录 / 保存即可。
• Vercel / Netlify / Cloudflare Pages：直接关联 GitHub 仓库，无需配置构建命令（Build command 留空），输出目录填 . 或留空即可秒级上线。

---

⚙️ 规格与限制说明

项目	规格限制	说明
支持格式	PNG, JPG, JPEG, WebP	覆盖绝大多数常规静态图像格式
行列范围	1 × 1 至 10 × 10	单次最多可切分 100 张图片
建议文件体积	≤ 20 MB	取决于设备内存，过大图片在手机端可能引起性能压力
切片最小尺寸	10 × 10 像素	防止切出无效空像素图片
浏览器环境	现代主流浏览器	支持 Chrome、Edge、Firefox、Safari 等（需支持 Canvas 与 Blob）

---

❓ 常见问题 (FAQ)

Q1: 切分出来的图片边缘会出现白边或微小偏移吗？

A: 当原图尺寸不能被目标行数或列数完全整除时（例如宽度为 1000px 切分成 3 列，单列为 333px，存在 1px 截断差），系统会向下取整保证切片尺寸统一。若要追求极致像素对齐，建议原图尺寸调整为可被行列数整除的数值。

Q2: 我的图片会被上传到第三方服务器吗？

A: 绝对不会。分镜盒子是 100% 纯前端运行的工具，图片由浏览器的 FileReader 读取并由 Canvas 在本地显存/内存中渲染处理，JSZip 直接在浏览器中组装二进制流供下载，全程不发任何图片数据包。

Q3: 手机端能直接使用并下载 ZIP 吗？

A: 可以。iOS（Safari / Chrome）及 Android（各类现代浏览器）均支持下载生成的 ZIP 文件，可在系统文件管理器中直接解压查看。

Q4: 后续会支持自定义文件命名或批量上传吗？

A: 批量多图排队切分、导出自定义前缀/后缀命名规则等特性已列入未来版本迭代计划中，欢迎提 Issue 或 PR！

---

📄 开源许可证

本项目基于 MIT License 开源。

---