100% 本地运行的在线图片合并 / 拼图 Web App：1~16 张图混合布局，导出 PNG/JPEG/WebP，图片全程在浏览器中处理，不上传任何服务器。
参考 mergeimage.org 实现的在线拼图编辑器，采用 Canvas 2D 渲染，预览与导出共用同一套渲染管线，真正所见即所得。提供 145 套布局矩阵库、多种画布比例与边距/间距/圆角/背景设置，支持文字叠加图层与本地素材库，中英双语。
| 维度 | 说明 |
|---|---|
| 拼图布局 | 1~16 张图片拼图，145 套布局预设（按张数索引，全部经过矩形合并校验） |
| 画布设置 | 比例自动 / 1:1 / 3:4 / 9:16 / 4:3 / 16:9，边距、间距、圆角、背景可调 |
| 无缝模式 | 间距 / 留白全零紧密拼接，与留白模式一键切换 |
| 图片编辑 | 单图缩放 / 平移 / 旋转 / 镜像 / 替换，点击交换两张图，拖拽排序，移动端捏合缩放 |
| 文字图层 | 多图层、系统字体、画布拖拽定位与删除 |
| 素材库 | IndexedDB 持久化本地素材库，素材支持旋转 / 翻转 / 裁剪 / 文字 / 贴纸再编辑 |
| 导出 | PNG/JPEG/WebP，1080~4K 自定义分辨率，JPEG/WebP 质量可调 |
| 体验细节 | URL 同步布局状态，中英双语，样式与导出设置本地持久化 |
npm install
npm run dev
# 打开 http://localhost:5173/?count=2&layout=0图片全程在浏览器本地处理、不上传服务器，适合需要拼图又担心图片隐私的场景。
| 入口 | 地址 |
|---|---|
| 在线体验 | https://pingtu-ch8.pages.dev |
| 源码仓库 | https://github.com/Ri1035/pingtu |
- Vite 5 + React 18 + TypeScript 5
- Canvas 2D 渲染（预览与导出同管线）· CSS Grid 布局缩略图
- localStorage 持久化样式与导出设置 · IndexedDB 持久化素材库
- 纯前端无后端、无第三方 UI 框架，产物约 72KB gzip
- mergeimage.org —— 本项目的复刻对象（在线图片合并 / 拼图编辑器）
- esmcelroy/photo-grid-collage-maker —— 主要架构参考，另融合 3 个开源拼图项目优点
详细实现见源码，本文不做展开。
说明：修改记录仅记录文档维护变更，不计入版本更新。
| 日期 | 修改内容 |
|---|---|
| 2026-10-05 | README 精简为项目介绍，补充 topics 标签 |
| 2026-10-05 | README 美化丰富：补充在线体验与参考来源，完善使用说明 |