🐹 简单拼图

简单、开源、不收集数据的纯本地在线拼图工具。

简单拼图是一款纯前端、纯本地处理的图片拼图工具。上传多张照片，选个模板，调整间距与圆角，一键导出高清成品——全程在你的浏览器里完成，图片不出设备，不上传任何服务器。

为什么选它?

• 🔒 不收集数据：没有统计、没有埋点、没有第三方上报，你的图片和操作永远只留在本地。
• 🧩 简单直观：选数量 → 选模板 → 传图片 → 导出，几步完成，零学习成本。
• 🎨 模板丰富：支持 2~9 张图片的多组布局模板，横竖、分栏、九宫格随你挑。
• ⚡ 快速高效：基于 Canvas 的渲染引擎，实时预览，导出 1x~4x 高清图。
• 🆓 开源免费：Apache 2.0 协议，代码全开放，可自由使用与二次开发。

对比

功能	简单拼图	Canva	Fotor	PhotoCollage.com
免费开源	✅	❌	❌	❌
纯本地、不上传	✅	❌	❌	❌
不收集数据	✅	❌	❌	❌
免登录使用	✅	❌	✅	✅
无水印导出	✅	部分	部分	✅
模板拼图	✅	✅	✅	✅

安装 / 快速开始

# 克隆仓库
git clone https://github.com/goku-open/easy-collage

# 进入项目目录
cd easy-collage

# 安装依赖
npm install

# 开发模式（热更新）
npm run dev

# 构建生产版本
npm run build

使用

# 启动开发服务器
npm run dev
# → 浏览器打开 http://localhost:5173

启动后按引导完成四步：

1. 选择模板 —— 选图片数量（2~9 张）与布局模板。
2. 上传图片 —— 拖拽或点击，支持 JPG / PNG / WebP / GIF。
3. 编辑调整 —— 实时预览，调整间距、圆角、背景色、水印。
4. 导出保存 —— 选格式（PNG / JPG）与分辨率，一键下载到本地。

# 运行测试
npm test

# 类型检查
npm run type-check

# 代码检查
npm run lint

# 代码格式化
npm run format

工作原理

完全在浏览器本地运行：上传的图片通过 FileReader 读入浏览器内存，用 Konva 在 Canvas 上渲染拼图网格，导出的图片由 Canvas 直接合成生成。

• 零后端：无服务端、无数据库、无请求。
• 零上报：已移除所有统计埋点（Umami），不向任何服务器发送数据。
• 隐私兜底：图片以本地对象 URL 存在，随会话结束即释放。

贡献与开发

欢迎提交 Issue 与 Pull Request。

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

支持 / 捐赠

我养了两只猫，汤圆和饺子。如果你觉得简单拼图给你的生活带来了快乐，你可以喂它们 罐头食品 🥩。

致谢

本项目基于 DDG0808/image 参考与二次开发。感谢原作者的开源与分享。

License

本项目采用 Apache License 2.0。

---

Keywords: 简单拼图, 在线拼图, 图片拼接, 拼图工具, 纯本地, 开源, 隐私, 不收集数据, easy-collage, photo collage, collage maker, online collage, image collage, privacy-first, open source, free collage, no upload, vue3, canvas collage