若要在 Canva 中為 Instagram 格子圖切割影像，設計師通常會將單一超大照片橫跨多個 1080×1080 畫板、將每個畫布分別匯出為 PNG，再依閱讀順序將磁磚發布到 Instagram。Canva 能處理預先規劃的 3×3 或 2×3 格子，但流程仍有些摩擦：磁磚尺寸受限於畫板範本、輔助線必須手動對齊，更換為不同的格子數代表必須從頭重建設計。專為此用途打造的本地切割工具則能消除這些摩擦。Image Grid Splitter 可從你的電腦接收一張 JPG、PNG 或 WebP，使用來源影像的原始像素尺寸將其切割成最多 100 個 PNG 磁磚，並以列與欄為每個檔案命名，使發布順序一目了然。檔案解碼、像素擷取、PNG 編碼與下載建立都在當前的瀏覽器分頁中執行，因此來源檔案不會離開你的裝置。
Canva 如何處理 Instagram 格子圖切割
Canva 的格子貼文流程是圍繞方形畫板而非矩形切割所設計。典型的做法是開啟寬高等於完整規劃格子的自訂尺寸設計（例如 3×3 Instagram 格子的 3240×3240），貼上來源影像後，依磁磚數量複製畫布，並將每個副本裁剪至各自的 1080×1080 區域。磁磚看起來沒問題後，每個畫板都會下載為 PNG，再依序將這些檔案上傳到 Instagram。
- 建立寬高等於完整規劃格子的自訂尺寸設計（例如 3×3 Instagram 格子的 3240×3240）。
- 放置來源影像以覆蓋整個設計，並開啟輔助線以保持列與欄邊緣可見。
- 依磁磚數量複製畫布，並將每個副本裁剪至各自的 1080×1080 區域，將每次裁剪對齊相同的輔助線。
- 將每個畫板下載為 PNG，尺寸須符合原始的格子數量。
- 依列優先順序將產生的磁磚上傳到 Instagram，從左上角的磁磚開始。
這個方法可行，但有三件事經常讓人卡關。裁剪後的磁磚尺寸取決於原始畫板解析度，而非來源影像的原始像素大小，因此低 DPI 的匯出檔在 Instagram 放大顯示時可能顯得模糊。逐一在每個副本上手動重新調整裁剪位置非常麻煩，且僅僅一個像素的錯位就會在完成的格子上出現明顯接縫。如果你做到一半決定將 3×3 格子改為 2×3 輪播，就必須重新調整畫板尺寸並重做裁剪。這些限制並非 bug，而是反映 Canva 是一款通用設計工具，而非專用的格子切割器。專注於切割的工具只有一項任務，並直接從來源像素執行。
使用 Image Grid Splitter 在瀏覽器中切割影像
當目標是在不重建設計的情況下將單一影像切割成相同的磁磚時，純瀏覽器版的 Image Grid Splitter 是更簡便的途徑。所有作業都在單一分頁內完成。
- 開啟 Image Grid Splitter，並從電腦中選擇 JPG、PNG 或 WebP 檔案，檔案大小須低於 25 MiB，且在工具所顯示的每邊 20,000 像素與 40 megapixel 限制內。
- 輸入符合你所需 Instagram 排版的列數（1–10）與欄數（1–10），然後選擇 Split image。
- 檢視每個編號磁磚所列出的尺寸與大約編碼大小，以便了解每次下載的內容。
- 以任意組合下載 PNG 檔案；檔名（例如 photo-row-2-column-3.png）能讓後續發布時的閱讀順序顯而易見。
切割與 PNG 編碼皆在原始大小的離屏畫布上進行，因此相鄰磁磚能精準接合，且每個來源像素都歸屬於某一塊磁磚。在底層，工具使用標準的瀏覽器 canvas drawImage 呼叫來複製每個來源矩形一次，再透過 canvas toBlob 方法將結果編碼為 PNG，以保留透明度與銳利的邊界。檔案選擇本身則透過 MDN 所記錄的標準 File API 進行，這也是來源影像能保留在本機裝置上的原因。
磁磚尺寸的計算方式
切割工具的規則很簡單：磁磚寬度是依比例的整數座標計算，因此每個來源像素只會歸屬於一塊磁磚。對於可整除的影像，每塊磁磚就是來源尺寸除以格子數。對於無法整除的影像，切割工具會使用 floor(i × dimension ÷ count) 來計算每個邊界，而不是將每塊磁磚四捨五入為一個誤導性的共同尺寸。
實際範例是將 10 像素寬度切割成四個欄位。邊界位置為 floor(0 × 10 ÷ 4) = 0、floor(1 × 10 ÷ 4) = 2、floor(2 × 10 ÷ 4) = 5、floor(3 × 10 ÷ 4) = 7，以及最終邊界 10。四個欄位分別跨越 [0, 2)、[2, 5)、[5, 7) 與 [7, 10)，寬度分別為 2、3、2 與 3 像素。最寬與最窄的磁磚最多僅相差 1 像素，四個寬度總和為 10，且不會遺漏任何狹窄條帶。相同的規則會獨立套用於高度，而該工具會拒絕會產生零像素磁磚的格子，因此對 2 像素高的影像要求切成三列會在事先被拒絕，而不會產生損壞的輸出。
Canva 切割與 Image Grid Splitter 一覽
兩種方式都能將單一影像轉換為一組可發布到 Instagram 的磁磚，但它們各有不同的取捨。
| 因素 | Canva 格子流程 | Image Grid Splitter |
|---|---|---|
| 磁磚像素來源 | 從複製的畫板裁剪而來 | 從來源影像的原始像素切割 |
| 磁磚尺寸 | 由畫板解析度固定（通常為 1080×1080） | 依來源影像的寬度與高度計算 |
| 格子彈性 | 更改數量需重建畫板 | 更改數量即可原地重新切割 |
| 檔案處理 | 設計會上傳至 Canva 伺服器 | 保留在當前瀏覽器分頁中 |
| 輸出格式 | Canva 匯出的格式（PNG 或 JPG） | 僅 PNG，無損 |
| 最適用於 | 在磁磚上加入文字、貼紙或版面配置 | 來源已是定案的純粹切割 |
原始像素路徑正是標準 canvas drawImage API 設計的目的：將每塊磁磚矩形複製到各自的畫布上而不重新取樣。對於仍需要在每塊磁磚上加入文字、貼紙、邊框或背景顏色的專案，Canva 的設計工具仍是更好的起點；當來源已是定案、僅需要切割時，切割工具才是正確選擇。
以正確順序將磁磚發布到 Instagram
格子貼文的閱讀順序很重要，因為 Instagram 會將第一個上傳的磁磚顯示在左上角位置，並依左到右、上到下的順序排列後續上傳的內容。對於 3×3 拼圖格子，上傳順序為第 1 列第 1 欄、第 1 列第 2 欄、第 1 列第 3 欄、第 2 列第 1 欄，依此類推直到第 3 列第 3 欄。Image Grid Splitter 的檔名已遵循該模式，因此在下載資料夾中進行簡單的字母排序即可對應上傳順序，無需重新命名任何檔案。
如果切割後將 3×3 計畫改為 2×3 輪播，僅需要依列優先順序的前六塊磁磚。剩餘的磁磚可予以丟棄，而不影響已發布的內容；這是 Canva 流程在不重新設計畫板與重新匯出所有檔案的情況下無法做到的事。
限制、錯誤與注意事項
切割工具會預先公布其限制，讓工作在失敗時立即停止，而非產出部分結果。輸入僅限於瀏覽器可解碼的 JPG、PNG 或 WebP 檔案，且大小上限為 25 MiB，解碼後的影像限制為每邊 20,000 像素、總計 40 megapixel。達到任何一項限制會顯示明確的錯誤，而不是產生悄悄損壞的格子。
- 不會保留來源中繼資料。即使可見的像素區域被精確保留，JPEG 與 WebP 檔案會被解碼並重新編碼為 PNG，因此原始的壓縮位元組、EXIF 區塊與色彩設定檔都會被捨棄。
- 僅輸出 PNG。這是刻意設計的，因為 PNG 能在不對每個擷取區域引入有損 JPEG 瑕疵的情況下，保留精確的磁磚邊界與透明度。
- 不均勻的分割會被刻意處理。整數邊界會恰好涵蓋每個來源像素一次；不均勻的列或欄在大小上最多僅相差 1 像素。
- 變更來源影像或任一格子值會使先前的輸出失效，且暫存的瀏覽器 URL 在被取代或工具關閉時會被撤銷。
對於更進階的案例，例如需要自訂輔助線、間距、出血或範本疊加的格子，支援手動切割位置的編輯器才是合適的工具。對於將單一影像切割成統一 Instagram 格子這種常見情況，切割工具可直接從來源像素完成工作，並回傳準備好上傳的編號 PNG。
如需更深入的瞭解，請參閱 如何在 Canva 中製作影像預留位置。
如需更深入的瞭解，請參閱 如何依序切割影像以製作 Instagram 格子圖。