將一張圖片切割成網格,意思是指將一張圖片分割成一組矩形的較小拼塊,讓這些拼塊合在一起時,能夠剛好覆蓋每一個原始像素一次——例如,將寬 10 像素的來源圖片分割成 4 欄,就會產生寬度分別為 2、3、2 和 3 像素的拼塊,加總起來剛好等於 10。這些拼塊共用筆直的水平與垂直邊界,像素之間不重疊,而且來源圖片的每個部分都會剛好落在某一塊拼塊中。這是將一張大型照片分割成可列印的接觸印樣、準備一組 3 乘 3 的 Instagram 輪播貼文、將精靈圖集切割成個別素材,或將高解析度的掃描檔切成易於處理的段落時的標準做法。整個流程包括選擇要使用幾列幾欄、依據來源圖片的原始像素尺寸計算邊界位置、將每個矩形複製到各自的畫布上,並把這些矩形各自儲存成獨立的圖檔。一個在瀏覽器中運作的網格切割工具就能在本機端完成所有這些工作,因此當你決定需要幾塊拼塊以及要保留哪些時,來源檔案永遠不會離開你的裝置。

「將一張圖片切割成網格」真正的意思
網格切割是影像編輯中一種特定的形式,而且它的規則比看起來更嚴格。網格永遠是矩形的,也就是說每一列有相同數量的拼塊,每一欄也有相同數量的拼塊。邊界沿著整個寬度與高度筆直地劃過。不會對圖片進行旋轉、縮放、填補或濾鏡處理,也不允許任何來源像素同時出現在兩塊拼塊中或完全消失。這就是真正的網格與自由形式的切割工具,或是內容感知的裁切之間的差異——後兩者都可能會捨棄它們認為不重要的像素。
最常出現的三種用途。第一種是社群媒體:一個 3 乘 3 的網格會將一張高聳的照片變成一組九張正方形拼塊,當依序發布到 Instagram 時,就會在個人檔案的網格上重新組合成原本的影像。第二種是列印:一張全景圖會被分割成 A4 大小的拼塊,讓每一張紙都能在家用印表機上列印,再將紙張黏貼起來。第三種是遊戲與網頁設計:將一張精靈圖集分割成個別的影格,讓每個影格能各自載入並獨立進行動畫處理。在每一種情況下,規則都一樣——每個來源像素都會剛好落在某一個輸出檔案中,不會重疊、不會有縫隙,也不會經過重新取樣。
針對這些用途,一個專注於本機端處理的切割工具就是最乾淨俐落的選擇,因為它只做一件事,而且做得可預期,更不會上傳來源檔案。Image Grid Splitter 接受單一的 JPG、PNG 或 WebP 檔案,要求你輸入介於 1 到 10 之間的列數與欄數,並產生最多 100 塊以在網格中的位置命名的 PNG 拼塊。
一步一步將一張圖片分割成網格
整個工作流程都在單一的瀏覽器分頁中完成,只需要三個簡短的步驟。
- 在顯示的檔案與像素限制範圍內,選擇一個本機端的 JPG、PNG 或 WebP 檔案。檔案選擇器只接受你的瀏覽器原生能解碼的格式,也就是 JPG、PNG 和 WebP。檔案大小上限為 25 MiB,而解碼後的影像每邊必須不超過 20,000 像素,總像素不得超過 4,000 萬——這些上限是為了避免瀏覽器分頁因畫布配置過大而當機。
- 輸入 1 到 10 的列數與欄數,然後選擇 Split image。這兩個欄位彼此獨立。無論哪個方向的組合都不能超過 10,總拼塊數也不能超過 100。如果所設定的列數或欄數會產生寬度或高度為零像素的拼塊,工具會拒絕該網格,而不會產生誤導性的空白檔案。
- 檢查每個編號拼塊的尺寸,並下載你需要的 PNG 檔案。結果面板會以上到下、左到右的順序列出每塊拼塊,並顯示其精確的寬度、高度,以及個別的下載連結。你可以儲存整組結果、只挑選想要的拼塊,或是不離開頁面就更改網格並重新分割。
網格邊界是如何計算的
網格切割中比較有趣的部分,是當來源的寬度或高度無法被欄數或列數整除時會發生什麼情況。這個切割工具使用的是比例式的整數座標:對於寬度為 W 的來源分割成 C 欄,第 i 條邊界會落在 floor(i × W / C) 的位置。這個公式能讓每個像素剛好被覆蓋一次,也永遠不會四捨五入成誤導性的統一尺寸。
一個實際的例子:寬度為 10 像素的來源分割成 4 欄,所得到的邊界分別位於 0、2、5、7 和 10。因此這四個欄位的寬度分別是 2、3、2 和 3 像素。最寬的拼塊只比最窄的拼塊多一個像素,四個寬度加總起來是 10,而且不會有任何狹窄的條帶被捨棄。相同的規則也會獨立套用在高度上,因此一張 1200 乘 900 的影像若分割成 3 列 4 欄,就會產生 12 個 300 乘 300 的拼塊,每個拼塊的寬度與高度都能剛好覆蓋整張來源圖片,不會留下縫隙。
實際上的效果是,你可以分割任何來源的圖片,即使它的尺寸是奇數,也能放心這些拼塊會緊密對齊、覆蓋所有區域,而且永遠不會重疊。接著,每塊拼塊會透過標準的 drawImage 呼叫繪製到各自原始大小的離屏畫布上,只會複製屬於該拼塊的來源矩形,不會進行拉伸、內插、濾鏡、邊框或填補處理。如果你需要的是絕對統一的拼塊尺寸,答案是在切割之前先預先裁切成目標拼塊尺寸的倍數,例如使用 Image Cropper。
輸入、輸出與檔案命名
了解輸入的內容與輸出的結果,會讓這個工具更容易讓人信任。底下的表格整理了支援的格式、輸出格式,以及這個工具所強制執行的限制。檔案選擇本身使用的是為網頁應用程式所記錄的標準瀏覽器檔案輸入,因此來源檔案是在本機端讀取,絕不會被送到伺服器。
| 階段 | 使用的內容 | 細節 |
|---|---|---|
| 接受的輸入格式 | JPG、PNG、WebP | 瀏覽器原生能解碼的格式;其他格式會以明顯的錯誤訊息拒絕 |
| 輸入檔案大小上限 | 25 MiB | 在解碼前強制執行 |
| 解碼後像素上限 | 每邊 20,000 px,總計 40 MP | 保護分頁不會因極大的畫布配置而當機 |
| 列數 | 1 到 10 | 僅接受整數值 |
| 欄數 | 1 到 10 | 僅接受整數值 |
| 拼塊數上限 | 100 | 10 列乘以 10 欄 |
| 輸出格式 | PNG | 無失真,支援透明 |
| 輸出檔名 | base-row-R-column-C.png | 以列為主的讀取順序,可排序 |
| 每塊拼塊回報的資訊 | 寬度、高度、編碼後大小 | 顯示在每個下載連結旁 |
選擇 PNG 是經過深思熟慮的。PNG 能在不透過失真編解碼重新壓縮可見像素的情況下,保留精確的拼塊邊界與來源中所有的透明區域。JPEG 或 WebP 的來源仍會被完整解碼,以確保每個可見像素都被精確重現,但原始的 JPEG 壓縮位元組與中繼資料並不會保留在輸出中。如果你需要來源位元組完全不變,請從 PNG 來源開始作業;如果你需要較小的封存檔案,之後可以使用 Image Compressor 將產生的拼塊進行轉換。
限制、錯誤與隱私
因為切割工具在本機端執行,所以限制大多來自瀏覽器本身。任何會導致分頁當機的情況都會在一開始就被拒絕。底下的表格列出了這個工具明確處理的情境,以及使用者在每種情況下會看到的內容。
| 情況 | 行為 |
|---|---|
| 不支援的檔案類型 | 顯示錯誤訊息,不產生輸出 |
| 檔案為空或無法讀取 | 顯示錯誤訊息,不產生輸出 |
| 檔案超過 25 MiB | 在解碼前拒絕 |
| 解碼後影像每邊超過 20,000 px 或總計超過 40 MP | 在繪製前拒絕 |
| 列數或欄數不在 1 到 10 之間 | 顯示錯誤訊息,不產生輸出 |
| 網格會產生零像素的拼塊 | 顯示錯誤訊息,不產生輸出 |
| PNG 編碼失敗 | 顯示錯誤訊息,不產生輸出 |
| 切割後來源或網格有所變更 | 舊結果失效,過時的 URL 會被撤銷 |
| 來源檔案上傳至伺服器 | 絕不會發生——處理程序都在目前的分頁中進行 |
隱私從設計上就已經內建其中。解碼、切割、編碼與下載作業都會在目前的瀏覽器分頁中完成;來源影像絕不會被上傳到 Lizely。當暫時性的下載 URL 被取代或工具關閉時,這些 URL 就會被撤銷,因此在你更改網格後,舊的拼塊將無法被取回。這使得這個工具適用於客戶工作、草稿設計,以及任何你單純不想讓它離開自己電腦的影像。
當你需要不同的工具時
這個切割工具刻意做得專一。它只會從單一影像產生統一的列與欄網格,不做其他事情。它不會偵測臉部、不會自動尋找面板、不會建立重疊的切片、不會為列印加上出血範圍、不會把下載檔案打包成 ZIP、不會重建全景,也不會最佳化 PNG 檔案。它也不允許你自訂導引線、間距或自訂的列與欄高度。
對於需要帶有出血範圍、自訂導引線或混合拼塊尺寸的印刷製作,請使用支援手動切片位置的編輯器。如果要一次分享大量拼塊,建議使用 Image Compressor 壓縮整組檔案,或使用 Image To PDF 將它們合併回單一 PDF。如果要在切割之後將每塊拼塊縮放成目標尺寸,請對已儲存的檔案執行 Image Resizer。如果是像將 JPG 來源在切割前轉成 PNG 主檔這種一次性轉換,請使用 JPG To PNG。
對於單純的九宮格貼文,最簡單的做法仍然是這個工具當初為之設計的那個流程:將列數設為 3、欄數設為 3,選擇 Split image,然後依照閱讀順序下載九個編號的結果。