路径: /home/admin/openclaw/workspace/image-merger/index.html

双击即可在浏览器中运行,无需服务器!

• ✅ 多图上传 - 支持拖拽上传,可多选
• ✅ 竖直拼接 - 自动竖直拼接多张图片
• ✅ 智能压缩 - 自动压缩到指定大小以下(默认 2M)
• ✅ 实时预览 - 处理前可预览效果
• ✅ 拖拽排序 - 可调整图片顺序
• ✅ 格式支持 - JPG、PNG、GIF、WebP

• 🎨 自定义目标大小 - 0.1MB ~ 10MB 可调
• 📐 图片间距 - 设置图片之间的间距
• 🎨 背景颜色 - 自定义背景色
• 📝 输出格式 - JPEG、PNG、WebP 可选

方式 A: 点击上传

• 点击上传区域
• 选择一张或多张图片

方式 B: 拖拽上传

• 直接拖拽图片到上传区域
• 支持批量拖拽

• 拖拽图片列表中的图片
• 调整到想要的顺序

点击「🔗 开始拼接」按钮

• 查看预览效果和文件信息
• 点击「📥 下载图片」保存

系统会按以下顺序自动压缩,直到文件小于目标大小:

第 1 步:降低质量

• 从 95% 质量开始
• 每次降低 5%
• 最低降至 10%

第 2 步:缩小尺寸(如果质量降到最低还是太大)

• 从 90% 尺寸开始
• 每次缩小 10%
• 最低缩至 30%

1. 上传多张聊天截图
2. 设置图片间距为 10px
3. 目标大小设为 2MB
4. 点击拼接,下载分享

1. 上传前后对比图片(2 张)
2. 调整顺序(前→后)
3. 设置间距 20px
4. 拼接后导出 PNG(无损格式)

1. 上传高清图片
2. 目标大小设为 1MB
3. 输出格式选 WebP(高压缩率)
4. 自动压缩后下载

1. 选择合适的格式

   • 照片类 → JPEG(压缩率高)
   • 截图/文字 → PNG(清晰度高)
   • 网络分享 → WebP(平衡最好)

2. 合理设置目标大小

   • 微信分享 → 1-2MB
   • 邮件附件 → 5MB 以内
   • 打印保存 → 不限或 PNG

3. 图片顺序很重要

   • 上传后拖拽调整顺序
   • 确保逻辑正确(如时间顺序)

• 文件仍然太大 → 降低目标大小或选择 WebP 格式
• 图片太模糊 → 提高目标大小或选择 PNG 格式
• 浏览器卡顿 → 减少图片数量或降低图片尺寸

1. 本地处理 - 所有处理在浏览器完成,不会上传到服务器
2. 浏览器兼容 - 建议使用 Chrome、Edge、Firefox 等现代浏览器
3. 内存限制 - 处理超大图片(如 10000px+)可能受浏览器内存限制
4. 清除缓存 - 处理后及时下载,刷新页面会清空数据

(实际时间取决于电脑性能和图片尺寸)

cd /home/admin/openclaw/workspace/image-merger
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/xsphp/image-merger.git
git branch -M main
git push -u origin main

然后在 GitHub 仓库设置中启用 Pages。

访问地址:https://xsphp.github.io/image-merger/

开始使用吧!🎉