分享一个纯前端「本地图片拼接工具」，单文件离线可用

最近写了个小工具：本地图片拼接工具。一个 HTML 文件，双击就能用，不用服务器、不用安装、不联网也能跑。

它能做什么

把多张图片按你需要的方式拼成一张大图：

• 三种拼接方式：横向拼接、竖向拼接、宫格拼接
• 四种输出格式：PNG / JPEG / WEBP / SVG
• 细节可调：边距、内部间距、圆角、背景色、透明背景
• 尺寸控制：可指定目标宽度/高度，也可留空自适应
• 排序灵活：按文件名、文件大小升降序排列
• 拖动换序：缩略图直接拖拽调整顺序
• 实时预览：拼接结果即时显示，满意再下载

最大的优点：图片不出本地

所有处理都在浏览器里完成，用的是 Canvas 和 URL.createObjectURL，图片不会上传到任何服务器。

对隐私敏感的图片、证件照、内部资料截图来说，这点比很多在线工具都靠谱。

怎么用

1. 打开这个 HTML 文件
2. 点击选择图片，或直接把图片拖进虚线框
3. 选好拼接方式、格式、边距等参数
4. 点「拼接」，预览没问题后点「下载」

全程离线，断网也能用。

一点技术说明

• 单文件，零依赖，纯原生 HTML + CSS + JavaScript
• 图片解码用 FileReader + Image，绘制用 Canvas 2D
• SVG 输出走字符串拼接 + Blob，避免 Canvas 的尺寸限制
• 圆角通过 ctx.clip() 和 SVG clipPath 实现
• 支持拖拽换序，用原生 HTML5 Drag and Drop

代码写得比较直白，没有框架，适合拿来改成自己的工具，比如加水印、加文字、批量导出等。

源码

源码已经在博客里整理好了，包含完整的作者信息和版权注释。有需要的可以直接取用、二次开发

如果这个小工具对你有用，欢迎拿去用，也欢迎留言交流。