一个面向批量修图流程的开源浏览器工具:将 2 张或 4 张照片在不缩放、不裁剪的前提下拼成一张大图,修图完成后再按原始坐标和分辨率精确拆回单张。
所有照片处理都在访问者的浏览器中完成。照片、合成图和任务记录不会上传到服务器。
- 将多张照片合成后送入只按单张图片计费或处理的修图工具
- 在像素蛋糕等修图流程结束后,按原始位置拆分回单张照片
- 批量生成多组修图包,降低重复上传、下载和人工裁切成本
- 在不搭建图片后端的情况下,为团队提供一个可私有部署的本地处理工具
本项目适合正常的个人与商业图片工作流。使用第三方修图平台时,请遵守对应平台的服务条款、计费规则和内容规范。
- 支持 JPEG、PNG、WebP、HEIC/HEIF、AVIF、TIFF 和 BMP
- 支持 2 张横排或竖排,以及 4 张 2x2、横排或竖排
- 拼合时不缩放、不裁剪原图,可配置安全间隔和背景色
- 在合成图底部写入高纠错二维码凭证,不占用照片像素
- 修图后自动读取图内凭证并校验总分辨率
- 凭证损坏时可通过 IndexedDB 本机任务库或备用 JSON 恢复
- 最多选择 40 张照片并自动分组批量生成
- 拆分结果以原文件名导出为无损 PNG ZIP
- 合成图被等比例缩放后支持应急缩放还原
当前 Cloudflare 部署:https://pixel-cake-stitcher.l33-820.workers.dev
桌面端:
手机端:
- 图片解码、拼合、二维码生成、拆分和 ZIP 打包均在浏览器本地进行
- 本机任务库只保存还原坐标和文件名等 manifest 信息,不保存原始照片
- Cloudflare Worker 仅用于托管编译后的静态页面,没有图片上传接口、数据库或外部 API 密钥
- 浏览器 Canvas 输出不保证保留 EXIF、ICC、HDR gain map、Live Photo 视频或 HEIC/TIFF 容器元数据
Cloudflare 会引导你登录账号、克隆项目并部署到一个新的 *.workers.dev 地址。该部署不需要创建 KV、D1、R2,也不需要配置密钥。
要求:Node.js 20 或更高版本,以及一个 Cloudflare 账号。
git clone https://github.com/30333702/pixel-cake-stitcher.git
cd pixel-cake-stitcher
npm ci
npx wrangler login
npm run deploy部署完成后,Wrangler 会输出可访问的 workers.dev 地址。需要自定义域名时,可在 Cloudflare Dashboard 的 Worker 设置中添加 Custom Domain。
npm ci
npm run dev浏览器打开终端中显示的本地地址。生产构建与本地预览:
npm run build
npm run preview单元测试和生产构建:
npm test
npm run build端到端测试需要先启动本地开发服务器,再分别运行:
npm run test:e2e
npm run test:formats
npm run test:batch
npm run test:credentialtest:credential 会模拟颜色调整和凭证区局部损坏。对像素蛋糕等第三方平台的兼容性仍应使用平台实际导出的文件验证。
- 修图平台导出时应保持合成图总像素尺寸,并保留底部凭证区
- 底部凭证区被裁剪或严重覆盖时,请使用本机任务库或事先导出的备用 JSON
- 浏览器可处理的最大图片尺寸取决于设备内存和 Canvas 实现
- 部分 RAW、16/32 位或特殊压缩 TIFF 不在支持范围内
- 精确还原保证的是照片像素尺寸、坐标和内容,不保证容器元数据完整保留
提交改动前请运行 npm test 和 npm run build。Bug 报告请包含浏览器版本、输入格式、图片尺寸、布局方式和可复现步骤;不要上传包含隐私信息的真实照片。