在线图片拼长图工具·多图垂直/水平拼接

工具介绍

将多张 JPG、PNG、WebP 图片在浏览器中本地拼接成一张长图（垂直或水平方向）。支持拖拽调整顺序、自定义图片间距（0-50px）和背景色（白/黑/透明），最终可导出 PNG / JPG / WebP 格式并控制输出质量。所有处理在本地 Canvas 完成，图片不会离开你的设备，适合制作聊天记录截图拼接、电商详情长图、社交媒体故事图等。

使用方法

拖拽图片到上传区域，或点击选择文件，也可直接粘贴剪贴板图片
在图片列表中拖拽调整排列顺序，点击 ✕ 可删除单张
选择拼接方向（竖向/横向）、间距大小和间距背景色
选择导出格式（PNG 无损 / JPG / WebP）和质量
点击「开始拼接」生成长图，右侧预览确认后点击「下载」保存

计算公式

竖向拼接：画布宽度 = max(所有图片宽度)，每张图等比缩放至画布宽度；画布高度 = Σ(缩放后高度) + 间距 × (n-1)。横向拼接：画布高度 = max(所有图片高度)，每张图等比缩放至画布高度；画布宽度 = Σ(缩放后宽度) + 间距 × (n-1)。

常见场景

聊天记录截图拼长图

将多张微信聊天截图按顺序拖入，竖向拼接、间距设为 0，导出 PNG，即可得到完整连续的聊天记录长图。

电商详情页长图

将商品各角度图、功能说明图按设计顺序排列，设置 10px 白色间距，竖向拼接导出 JPG（质量 90%），直接上传到电商后台。

社交媒体拼图

横向拼接 3 张风景照，间距 5px 黑色背景，导出 WebP 格式，形成电影感宽幅对比图分享到朋友圈或微博。

教程步骤图

将软件操作截图按步骤顺序竖向拼接，配合编号截图形成完整操作指南长图。

常见问题

图片会上传到服务器吗？

不会。所有图片处理完全在浏览器本地通过 Canvas API 完成，没有任何网络请求。关闭页面后数据自动清除。

最多可以拼接多少张图片？

技术上没有硬性限制，但建议单次不超过 20-30 张，否则生成的画布像素量可能导致浏览器内存占用过大。如果图片特别大（如单张 4000px 宽），建议先压缩再拼接。

拼接后图片的尺寸是如何确定的？

竖向拼接时，画布宽度等于所有图片中最大的宽度，其余图片等比放大/缩小到该宽度。横向拼接时，画布高度等于最大高度，其余图片等比缩放。这样保证拼接后整齐对齐。

间距背景色选「透明」导出 JPG 会怎样？

JPG 格式不支持透明通道，透明区域会显示为黑色。如果需要透明间距效果，请选择 PNG 或 WebP 格式导出。

如何调整图片的拼接顺序？

在图片列表中，按住左侧的拖拽手柄（⠿图标），将图片拖到目标位置即可。顺序会实时更新，最终按列表从上到下（竖向）或从左到右（横向）拼接。

导出 PNG、JPG、WebP 有什么区别？

PNG 无损但体积较大，适合截图/文字图；JPG 有损压缩，体积小，适合照片；WebP 兼具较小体积和较好画质，但部分老旧软件可能不支持。质量滑块仅对 JPG/WebP 生效。

拼接后的图片会有水印吗？

不会。本工具完全免费且不添加任何水印，输出的就是纯净的拼接结果。