跳到主内容
UniKit

图片拼接

把多张图片横向、纵向或按网格拼成一张:可调间距、外边距、对齐方式与统一缩放,支持透明或自定义背景,导出 PNG / JPEG / WebP。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

图片只在浏览器本地拼接,不会上传

先选择至少一张图片,可以一次选多张

布局方式

0px
0px

拼接结果

这个工具能做什么

  • 把多张截图拼成一张对照图:横向并排或纵向堆叠,两张尺寸不一样也能对齐(居中 / 起点 / 终点)。
  • 做九宫格预览或产品图墙:网格模式按列数排布,每列宽度取该列最宽图片,最后一行不满也按整列宽计算画布。
  • 统一高度做成横滑长图:先用「统一高度」把所有图缩到同一高度,再纵向拼接,避免高矮不齐。
  • 给拼接结果加白边或透明留白:外边距可调,背景可选透明、白色、黑色或自定义颜色,导出 PNG 保留透明。

示例

输入

两张图 800 × 600 与 400 × 200,横向拼接、间距 0、外边距 0、居中对齐

输出

画布 1200 × 600
图 1 落在 (0, 0),尺寸 800 × 600
图 2 落在 (800, 200),尺寸 400 × 200
导出文件名 merged-2x1.png

画布尺寸与落点由纯几何逻辑算出:横向时宽 = Σ宽 + 间距×2 + 外边距×2,高 = max(高) + 外边距×2;居中对齐让 200 高的图在 600 高的画布里偏移 (600-200)/2 = 200。真正画到 canvas 上导出这一步依赖浏览器,无法在命令行离线验证。

常见问题

拼接顺序能改吗?

能。上传后每张图都有上移、下移、删除按钮,顺序就是拼接顺序;网格模式下顺序决定从左到右、从上到下的排布。选完文件后不做任何调整,顺序就是选择文件的顺序。

「限制最大边」和「统一高度」有什么区别?

「限制最大边」只缩小不放大:把超过设定值的长边等比缩到该值,本来就更小的图片保持原样。「统一高度」是等比缩放到完全相同的高度,小图会被放大(可能变糊),适合做整齐的横滑长图。

网格模式的对齐为什么不起作用?

网格模式刻意忽略对齐设置,每张图固定落在自己单元格的左上角,因为网格里再居中会让行列看起来错位。需要居中或贴底请用横向 / 纵向模式。

间距和外边距能设多大?

间距与外边距都在 0–100 像素之间,列数 1–8,画布最长边上限 20000 像素(浏览器 canvas 的实用上限,超过多数设备会分配失败)。横向 / 纵向模式的图片数量没有硬上限,但请留意画布总尺寸。

图片会上传吗?

不会。所有图片用 createImageBitmap 在浏览器里解码,按计算好的坐标画到本地 canvas 上,再用 toBlob 导出,全程没有网络请求。

关键词:图片拼接拼图合并图片长图拼接image mergerimage mergecombine imagesstitch imagesphoto gridcollage

同类工具