🎯 MomentWebStitcher - 网页版朋友圈长图拼接工具

一个专为朋友圈设计的智能长图拼接工具，支持将多张图片垂直拼接成适合社交媒体分享的长图，完全基于Web技术实现，可直接在浏览器中使用。

🤔 创作初衷

开发这个网页版工具，是因为现有的拼图软件大多需要付费(╥╯^╰╥)，且拼接效果不尽如人意。我希望打造一个免费且好用的解决方案(✿◠‿◠)，直接在浏览器中就能使用。虽然当前这个工具可能还有提升空间(＞_＜)，但咱既然会写代码，不如自己动手丰衣足食，享受从零打造网页工具的乐趣(๑•̀ㅂ•́)و✧！

---

🌟 功能亮点

🎯 智能分组：根据图片数量自动设置合理的每组上限
📱 触屏优化：专为手机和平板优化的触摸操作体验
🎨 可视化操作：直观的拖拽式图形界面
⚡ 浏览器处理：无需服务器，完全在浏览器端处理
🔧 灵活配置：可自定义每组图片数量
📁 拖拽支持：支持文件和文件夹拖拽
📊 实时预览：处理进度实时显示
🧹 一键清理：内置清理功能
⏰ 时间排序：按拍摄时间自动排序（早到晚）
📱 移动适配：响应式设计，完美支持手机和平板
🤏 触摸手势：长按拖拽、触觉反馈、防误触设计

🚀 快速开始

在线使用

暂不支持，等我找到免费域名再说¯_(ツ)_/¯ https://piggywu981.github.io/MomentWebStitcher/

本地部署

1. 克隆仓库

git clone https://github.com/Piggywu981/MomentWebStitcher.git
cd MomentWebStitcher

2. 本地运行

# 方法1: 使用Python
python -m http.server 8000

# 方法2: 使用Node.js
npm install -g http-server
http-server .

# 方法3: 直接双击index.html（部分浏览器可能需要）

3. 打开浏览器访问 http://localhost:8000

📋 使用教程

1. 上传图片

• 拖拽上传：将图片文件拖拽到上传区域
• 点击上传：点击上传区域选择图片文件
• 批量上传：支持一次选择多张图片

2. 分组设置

• 自动分组：设置每组图片数量后点击"自动分组"
• 手动调整：拖拽图片在分组间自由移动
• 分组管理：每个分组可单独清空

3. 触屏操作指南（手机/平板专用）

📱 基本手势

• 长按拖拽：长按图片约400ms开始拖拽
• 移动放置：拖拽到目标分组后松开手指
• 返回图片池：拖拽到左侧图片池区域
• 删除图片：点击图片上的"×"按钮

🤏 操作技巧

• 触觉反馈：支持震动的设备会有操作反馈
• 防误触：轻微移动不会触发拖拽，需要明显移动
• 扩大点击区：删除按钮周围有额外10px的点击缓冲区域

📱 移动优化特性

• 响应式布局：自动适配手机屏幕
• 大触摸目标：所有按钮和交互区域针对触摸优化
• 流畅动画：拖拽时有平滑的视觉反馈

4. 参数配置

• 输出质量：调整输出图片质量（70-100%）
• 分组大小：自定义每组图片数量

5. 开始处理

• 点击"开始拼图"按钮
• 实时查看处理进度
• 完成后自动下载拼接后的图片

🎨 界面功能详解

主界面布局

左侧区域 - 图片管理

• 上传区域：支持拖拽和点击上传
• 分组控制：设置每组图片数量和自动分组
• 分组显示：可视化查看和管理所有分组
• 图片池：待分配的图片集合

右侧区域 - 处理和预览

• 预览窗口：查看拼接效果
• 输出设置：调整输出质量
• 处理控制：开始/停止处理
• 进度显示：实时处理进度

特色功能

🎯 智能分组算法

• 根据图片总数自动计算合理分组
• 支持手动调整分组内容
• 实时统计每组图片数量

🎨 拖拽操作

• 支持图片在分组间自由拖拽
• 支持从图片池拖拽到分组
• 支持清空分组后图片回到图片池
• 组内排序：支持在分组内拖拽调整图片顺序

📱 触屏优化功能

• 长按拖拽：400ms长按开始拖拽，防止误触
• 触觉反馈：支持设备震动反馈（拖拽开始、放置成功、删除确认）
• 触摸目标：所有按钮和交互区域增大50%以上
• 手势支持：完美适配手机和平板触摸操作
• 响应式布局：自动适配不同屏幕尺寸
• 防误触：移动阈值保护，轻微移动不会误触发

📊 实时反馈

• 图片数量实时统计
• 处理进度百分比显示
• 详细的操作状态提示
• 触摸操作视觉反馈（阴影、动画、颜色变化）

🛠️ 技术规格

浏览器兼容性

• Chrome: 90+
• Firefox: 88+
• Safari: 14+
• Edge: 90+

支持的图片格式

• JPEG/JPG: 最常用的照片格式
• PNG: 支持透明背景
• WebP: Google现代格式
• BMP: Windows位图
• TIFF: 高质量图像

技术架构

• 前端: HTML5 + CSS3 + JavaScript (ES6+)
• 图片处理: Canvas API
• 拖拽: 原生Drag & Drop API + Touch Events API
• 触屏优化: 触觉反馈API (Vibration API) + 触摸手势识别
• 响应式设计: CSS Grid + Flexbox + 媒体查询
• 部署: GitHub Pages

🔧 高级功能

自定义配置

在 script.js 中可调整以下参数：

const CONFIG = {
    DEFAULT_GROUP_SIZE: 9,      // 默认每组图片数
    MAX_FILE_SIZE: 10 * 1024 * 1024,  // 最大文件大小 (10MB)
    OUTPUT_QUALITY: 95,         // 默认输出质量
    SUPPORTED_FORMATS: ['image/jpeg', 'image/png', 'image/webp', 'image/bmp', 'image/tiff']
};

批量处理

• 支持一次处理多张图片
• 自动按设置的分组大小进行分组
• 每组图片单独生成一个文件

📁 项目结构

MomentWebStitcher/
├── index.html              # 🎨 主页面
├── style.css               # 🎨 样式文件
├── script.js               # ⚙️ 核心JavaScript
├── package.json            # 📦 项目配置
├── README.md              # 📖 说明文档
└── .github/
    └── workflows/
        └── deploy.yml     # 🚀 GitHub Actions部署配置

🚀 部署指南

部署到GitHub Pages

1. Fork 本仓库
2. 进入仓库 Settings → Pages
3. 选择 Source 为 "Deploy from a branch"
4. 选择 Branch 为 "main" 和 "/ (root)"
5. 等待部署完成

自定义域名

在仓库设置中添加自定义域名，或修改 CNAME 文件。

❓ 常见问题解答

🔧 技术问题

Q: 为什么图片处理很慢？ A: 图片处理在浏览器端进行，大文件处理可能需要时间。建议：

• 减少单次处理的图片数量
• 使用较小的图片文件
• 关闭其他占用资源的标签页

Q: 支持哪些浏览器？ A: 支持所有现代浏览器（Chrome 90+, Firefox 88+, Safari 14+, Edge 90+）

Q: 有文件大小限制吗？ A: 浏览器通常限制单个文件大小为100MB，但建议单张图片不超过10MB以获得最佳体验

Q: 如何处理大量图片？ A: 建议分批处理，每次处理不超过50张图片

🎨 使用问题

Q: 如何调整图片顺序？ A: 在分组内可以拖拽调整顺序，或清空后重新分组

Q: 输出图片质量如何设置？ A: 使用右侧的质量滑块调整（70-100%）

Q: 可以横向拼接吗？ A: 当前版本仅支持垂直拼接，横向拼接功能将在后续版本添加

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系

如有问题或建议，请通过 GitHub Issues 联系我们。