电商详情页排版
运营小周要上新款连衣裙，主图、细节图、尺码表、模特上身图共 8 张。详情页模板要求图片统一宽度，逐张上传调整费时且容易错位。用本工具竖排模式将 8 张图按顺序拼成一张长图，统一宽度 750px，上传一次完成，确保页面加载顺序与排版一致。
拼接预览Stitch Preview
上传 2 张以上图片，自动拼接预览
支持竖拼长图 · 横拼 · 网格拼图
支持竖拼长图 · 横拼 · 网格拼图
拖入 / 点击 / 粘贴图片
可多选批量 · 截图直接 Ctrl V 粘贴 · 本地拼接不上传
拼接方式Mode
外 观Spacing & Style
0 px
0 px
0 px
导 出Export
就绪 · 上传 2 张以上图片开始拼接，全程本地处理不上传
第一节
关于本工具
About多张截图要拼成长图发朋友圈，或是把商品图排成九宫格，最怕对齐歪了、缝隙不均匀。这个工具提供横拼、竖拼和网格三种模式，拖入图片即可自动对齐边缘并统一间距。所有处理都在浏览器本地完成，图片不会上传到任何服务器——隐私敏感的场景（如证件照、聊天记录）也能放心用。
使用场景
装修前后对比
业主老陈翻新厨房，拍了装修前、水电改造后、贴砖后、完工后 4 张照片。想发到业主群和朋友圈，但单张发别人看不出变化。用本工具横排模式将 4 张图按时间顺序拼成一张横向对比图，每张图下方加文字标注阶段，一目了然。
九宫格发朋友圈
周末出游拍了 12 张风景照，想发朋友圈九宫格但只能选 9 张，剩下的舍不得删。用本工具网格模式将 12 张图排成 3×4 布局，再截成 3 张 3×3 的九宫格发布，每张九宫格包含 4 张原图，评论区连贯展示完整场景。
产品参数说明书
产品经理小刘要制作 A4 纸打印版说明书，包含产品外观图、尺寸标注、技术参数表、保修条款共 6 页内容。用本工具竖排模式将 6 张截图按页码顺序拼成一张长图，设置每页高度 297mm（A4 纵向），导出后直接打印无需再排版。
聊天记录取证
律师助理小陈需要将微信聊天记录作为证据提交，对方发了 20 多条包含转账截图、语音转文字、位置分享的混合消息。用本工具竖排模式将每屏截图按时间顺序无缝拼接，确保消息连续不断页，法院接收时能看清完整对话上下文。
课程讲义合并
学生小王上完 3 节网课，每节课老师发了 4 张 PPT 截图，共 12 张散图。复习时翻来翻去效率低。用本工具网格模式将 12 张图排成 4×3 布局，每张图保留原始清晰度，打印成一张 A3 大图贴在书桌前，对照笔记一目了然。
第二节
使用指南
Getting Started使用步骤
- 1在「图片拼接」页面上传至少 2 张图片，支持 JPG/PNG/WebP 格式，每张不超过 20MB
- 2选择拼接模式：横拼（左右排列）、竖拼（上下排列）或网格（行列布局），模式切换后预览区即时更新
- 3拖动图片缩略图调整顺序，或点击图片上的「×」移除某张；网格模式下可设置行数和列数（2×2 至 5×5）
- 4点击「开始拼接」按钮，浏览器内完成处理，预览区显示拼接结果图，下方出现「下载」按钮
- 5点击「下载」保存拼接后的图片到本地，格式保持原图类型（JPG/PNG/WebP）
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传三张等宽图片（宽度均为800px），选择横拼模式，间距设为10px | 生成一张宽度为2440px（800+10+800+10+800）、高度为原图最大高度的横向拼接图 | 常规：横拼典型场景，验证间距参数生效和等宽图片的对齐逻辑 |
| 上传两张等高图片（高度均为600px），选择竖拼模式，间距设为0px | 生成一张高度为1200px、宽度为原图最大宽度的纵向拼接图，图片之间无缝贴合 | 常规：竖拼基础用法，间距为0时验证图片是否紧密拼接无缝隙 |
| 上传4张图片（尺寸分别为400x300、400x400、400x500、400x600），选择网格拼图，列数设为2，间距设为5px | 生成一张2行2列的网格图，每列宽度统一为405px（400+5），每行高度统一为最高原图高度+5px，图片居中裁剪至统一尺寸 | 常规：网格拼图多图场景，验证列数设置和图片尺寸统一化处理（居中裁剪或缩放） |
| 上传一张图片，选择横拼模式 | 直接输出原图，无拼接操作 | 边界：单张图片时工具应返回原图，而非报错或生成空白图 |
| 上传两张图片，其中一张尺寸为10000x10000像素，另一张为100x100像素，选择竖拼模式，间距设为0px | 生成一张高度为10100px、宽度为10000px的纵向拼接图，小图被拉伸至与大图等宽 | 边界：极端尺寸差异，验证工具是否对图片进行等宽缩放处理（或保持原尺寸对齐） |
| 上传两张图片，选择横拼模式，间距设为-5px | 提示错误：间距值不能为负数，请重新输入0或正数 | 易错：负数间距在UI中常被忽略，工具应做输入校验并给出明确提示 |
| 上传两张图片，其中一张为透明背景的PNG，另一张为白色背景的JPG，选择网格拼图，列数设为1 | 生成一张纵向网格图，透明背景的PNG保持透明通道，白色背景的JPG正常显示 | 易错：透明通道处理——部分工具会丢失透明背景，导致PNG变成黑底或白底 |
| 上传两张图片，选择横拼模式，间距设为0px，但上传的图片格式为BMP和WebP | 生成一张拼接后的PNG图片（或保持原格式输出，取决于工具设定） | 易错：不同图片格式混合输入时，输出格式的兼容性（如BMP不支持透明通道，WebP部分浏览器不兼容） |
常见错误对照
1.拼接方向选错，导致图片被拉伸变形
✗ 错误
上传两张不同尺寸的图片，选择「横拼」后直接输出✓ 修复
先确认图片尺寸是否一致；若不一致，在「横拼」模式下勾选「保持原比例」或手动裁剪成统一高度横拼默认将各图拉伸至同一高度，宽高比不同的图片会被压扁或拉长，破坏原始构图。
2.网格拼图行列数设定不合理，导致图片被裁切
✗ 错误
上传 5 张图片，设定 2 行 3 列网格，直接拼接✓ 修复
上传 6 张图片，设定 2 行 3 列网格；或上传 5 张图时选择「自动填充空白格」网格模式要求图片总数等于行×列，否则工具会自动裁切或留空，导致部分图片显示不全。
3.图片格式不兼容，拼接后输出失败
✗ 错误
上传 .webp 或 .heic 图片，直接点击「开始拼接」✓ 修复
先将 .webp/.heic 转换为 .jpg 或 .png 后再上传该工具基于浏览器前端处理，部分浏览器不支持解码 .webp 或 .heic，导致拼接过程卡死或输出空白。
4.图片文件过大，浏览器内存溢出崩溃
✗ 错误
上传单张 20MB 以上的高清原图，直接拼接✓ 修复
先用图片压缩工具将单张图片压缩至 5MB 以内，或降低分辨率至 2000px 宽度纯前端拼接需要将图片加载到内存中，多张大图同时处理会超过浏览器内存限制（通常 1-2GB），导致页面无响应。
5.竖拼时图片宽度不一致，结果出现错位
✗ 错误
上传宽度分别为 800px 和 600px 的图片，选择竖拼✓ 修复
先统一裁剪或缩放所有图片至相同宽度（如 800px），再执行竖拼竖拼默认以最宽图片为基准，较窄图片会居中放置，左右留白，导致拼接结果不整齐。
6.透明度通道未处理，拼接后出现黑色背景
✗ 错误
上传带透明背景的 PNG 图片，拼接后透明区域变成黑色✓ 修复
拼接前将 PNG 图片「合并图层」或「填充白色背景」后再上传浏览器 Canvas 在拼接含透明通道的图片时，默认用黑色填充透明区域，而非保留透明。
7.图片顺序排列错误，拼接后逻辑混乱
✗ 错误
上传多张截图时未按文件名排序，直接拖拽上传✓ 修复
在上传前将图片按「名称排序」重命名为 01.jpg、02.jpg……或使用工具的「拖拽排序」功能调整顺序上传顺序默认按文件系统读取顺序，可能与预期排列不同，导致拼接结果顺序错乱。
第三节
工作原理
How It Works核心公式
总宽度 = 单图宽度 × 列数 + 间距 × (列数 - 1)；总高度 = 单图高度 × 行数 + 间距 × (行数 - 1)
变量说明
单图宽度每张图片的像素宽度单图高度每张图片的像素高度列数网格拼图中水平方向图片数量行数网格拼图中垂直方向图片数量间距图片之间的间隔像素值
示例
4 张 800×600 的图片排成 2 行 2 列网格，间距 10 像素：总宽度 = 800×2 + 10×(2-1) = 1600 + 10 = 1610 像素；总高度 = 600×2 + 10×(2-1) = 1200 + 10 = 1210 像素。最终拼接图尺寸为 1610×1210 像素。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我想把几张竖着的长截图拼成一张，用横拼还是竖拼？＋
答
竖拼（垂直拼接）是把图片一张接一张从上往下叠，适合把几张内容连续的竖屏截图（比如聊天记录、网页长截图）合成一张完整长图。横拼（水平拼接）是把图从左往右并排，适合全景照片或并列对比图。网格拼图则把多张图按行列排列成类似九宫格的效果。选哪个取决于最终想要的形状和内容逻辑，不是看原图方向。
问图片拼接完图片会变模糊吗？会压缩画质吗？＋
答
本工具是纯浏览器端处理，拼接过程不会主动压缩图片。最终输出图片的清晰度取决于你上传的原图质量和输出格式设置。如果选了 JPEG，可能会因为编码压缩而比原图小一些；选 PNG 则基本无损。如果觉得拼完变糊，先确认原图本身分辨率是否够用，再检查输出格式是否选了低质量的 JPEG。
问最多能拼多少张图？有没有张数限制？＋
答
没有硬性的张数限制，但受浏览器内存和性能影响。图片张数越多、每张分辨率越大，浏览器处理时占用的内存就越高，极端情况下页面可能卡顿或崩溃。建议单次拼接控制在 20 张以内，如果图片分辨率很高（如单张 4000×3000），更建议分批操作。
问拼图的时候图片顺序乱了怎么办？＋
答
上传图片后，结果区会按你选择的顺序排列。如果顺序不对，目前不支持在工具内拖动重排，需要在上传前自行给文件重命名（如 01.jpg、02.jpg）或按顺序逐个上传。如果已经上传错了，可以清空列表重新按正确顺序选择文件。
问网格拼图的间距和边距可以调吗？＋
答
网格拼图模式下，工具提供间距（图片之间的缝隙）和边距（整体图片与画布边缘的空白）的调整选项，通常以像素值为单位。你可以通过输入框或滑块调整，默认值一般是 0。如果没看到这些选项，检查当前是否选中了网格模式；横拼和竖拼模式下没有间距设置。
问拼接的图片尺寸不一样，能自动对齐吗？＋
答
竖拼时，如果图片宽度不同，工具默认以最宽的一张为基准，其他图片会按比例缩放宽度对齐（高度自适应），或居中放置（保持原尺寸）。横拼时同理，高度不同会以最高的一张为基准。具体对齐方式可以在拼接选项里选择：拉伸对齐、居中或按比例缩放。
问这个工具需要上传图片到服务器吗？隐私安全吗？＋
答
完全不需要。本工具在浏览器本地处理，所有图片数据不会离开你的设备。拼接过程通过 JavaScript 在浏览器内存中完成，不会上传到任何服务器。网络断开也能用（前提是页面已加载完毕），适合处理含敏感信息的聊天截图或证件照。
问拼出来的图有白边或者黑边怎么办？＋
答
白边或黑边通常出现在以下情况：一是图片尺寸不一致时选择了'居中'对齐模式，空白部分用背景色填充（默认白色）；二是网格拼图设置了间距。如果不需要边，把间距设为 0，对齐模式选'拉伸'或'缩放'，背景色设为与图片边缘相近的颜色。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。