图片切片工具

什么是图片切片？

图片切片（也叫图片分割、切图、网格切分）是指将一张完整的光栅图像按照行列网格切成若干张较小的矩形子图，每张子图称为一个切片（tile）。原始图像沿规则网格被切割，由"行数 × 列数"产生对应数量的独立切片文件。每个切片都是自包含的图像文件，可以独立打开、编辑、分享或重新拼接。切片技术是地图系统（如 Google Maps、OpenStreetMap、Bing Maps 等网络地图瓦片服务）、马赛克拼图效果、大幅面打印拼版布局以及 CSS 精灵图分解的基础。

当一张大图需要拆分成小块用于分发、处理或合成时，就会用到切片工作流。网络地图把地球切成 256×256 px 的瓦片，让浏览器只下载可见部分；印刷设计师把海报切成多张 A4 纸打印后再拼接；游戏开发者和 UI 设计师把精灵图集切成单独的帧。无论你的应用场景是什么，本工具都能让你无需安装软件、在浏览器内快速、私密地把任意图片切成网格。

切片工具的工作原理

本图片切片工具完全在浏览器内运行，使用 HTML5 Canvas API。上传图片时，它会被解码为内存中的 HTMLImageElement，不会发送到任何服务器。你可以选择把图片切成多少行多少列（从 1×1 到 12×12，最多 144 张切片）。点击"切分图片"后，工具会根据图片宽度除以列数、图片高度除以行数，计算每张切片的精确像素尺寸，然后通过 ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) 把每个子矩形绘制到独立的离屏 canvas 上。

每个切片 canvas 随后通过 canvas.toBlob() 编码为无损 PNG，并以镜像原图布局的响应式网格展示。鼠标悬停某切片会高亮显示；点击切片（或下载标识）即可将该切片以 tile_r{row}_c{col}.png 为名保存到本地。由于切片数学使用基于原始尺寸的整数像素坐标，重新拼接后的切片总能精确还原原图——无拉伸、无重叠、无间隙。

行、列与切片尺寸

网格布局与每张切片像素尺寸的关系很简单，但值得理解。对于尺寸为 W × H 的图片，切成 R 行 C 列，每张切片的近似尺寸为 floor(W/C) × floor(H/R)。当尺寸无法整除时，最后一行或最后一列的切片会吸收剩余像素，所以总覆盖区域始终等于原图。切片按钮下方的摘要面板会在下载前显示计算出的精确切片尺寸。

网格	切片数	典型用途
2 × 2	4	社交媒体轮播四宫格
3 × 3	9	Instagram 九宫格拼图
1 × 4	4	横向 Banner 分条
4 × 1	4	纵向滚动吸附分段
6 × 6	36	大幅海报拼版打印
8 × 4	32	地图瓦片表分解

何时使用图片切片工具

在大量创意和技术工作流中，把图片切成切片都是明智之选。以下是最常见的几类场景，相比在桌面编辑器里手工裁剪，本工具能节省大量时间：

• Instagram 九宫格拼图。把单张 1080×1080（或更大）的画作切成 3×3 的方形切片，按倒序发布，让你的 Instagram 个人主页拼成一张完整大图。
• 网络地图瓦片。从高分辨率地图或全景图中生成 256×256 px 瓦片表，用于 leaflet、mapbox、OpenLayers 的瓦片图层。
• 大幅海报拼版。把海报切成 A4 大小的切片，在家用打印机上分张打印、裁切、再拼成大幅墙面海报。
• 精灵图集拆解。把精灵图集或纹理图集拆解为单帧，方便检查、编辑或重新打包。
• 轮播与滑块素材。把一张宽幅主视觉切成多张连续幻灯片，用于 WordPress、Shopify 或自建站的轮播组件。
• 游戏与 UI 图集。切片纹理图集，验证每个单元格是否与 UV 映射对齐。
• 邮件安全分块。部分邮件客户端会屏蔽大图。切成小切片有助于某些布局稳定渲染。

如果你只需要一张矩形裁剪而非整张网格，请使用 图片裁剪 工具。如果你想把多张图片合并成一张，请使用 图片拼贴 工具。

如何把图片切成切片

使用本工具切图只需几秒，全程在浏览器内完成。无需上传、无需注册、无需安装。请按以下四步操作：

1. 上传图片。点击上传区域或拖入 PNG、JPG、WebP、GIF、BMP 文件，图片会在本地解码并显示预览。
2. 设置行数与列数。使用两个滑块设定网格。默认 3×3 生成 9 张切片；最大 12×12 生成 144 张切片。
3. 切分图片。点击"切分图片"按钮，工具会计算切片尺寸并在按钮下方渲染可点击的预览缩略图网格。
4. 下载切片。点击任意切片，即可下载该切片为名为 tile_r{row}_c{col}.png 的 PNG 文件。重复操作直至下载完所需切片。

由于每一步都通过 JavaScript 与 Canvas API 在本地运行，你的图片永远不会离开浏览器。这让切片过程完全私密、即时，适合处理敏感或机密的图像作品。