九宮格切圖
將圖片切割為3×3九宮格，適合社群媒體分享
拖曳圖片到此處，或點選選擇檔案
支援 JPG、PNG、WebP、BMP、GIF 格式
什麼是九宮格切圖？
圖片九宮格工具會把一張圖片切成等大的小圖，常見做法是 3×3 的九張圖。依正確順序發布到 Instagram、朋友圈、微博等平台後，個人頁或動態格線中會重新拼出原本的大圖，形成更強的視覺展示效果。它適合品牌活動、產品預告、活動海報、作品集展示，以及需要整體構圖的社群內容。使用時要注意原圖比例、人物與文字的安全邊距，還有上傳順序；只要其中一塊位置錯了，整體畫面就會被打亂。
使用方式
使用方式
- 上傳或拖曳圖片
- 工具會自動將其切割成 9 塊
- 點選任一區塊即可單獨下載
- 點選「全部下載」即可一次儲存所有區塊
裁切注意事項
- 請使用符合最終預期長寬比的圖片；自動切割無法還原已被裁切或填補不當的內容。
- 發布前請先預覽全部九個區塊，特別留意文字、人臉或產品邊緣跨越切割線的情形。
使用場景
技術原理
九宮格切圖工具基於 HTML5 Canvas 2D API（WHATWG HTML Living Standard §4.12，原始規範見 2014 年 W3C HTML5 建議書）。整個流程分為三層：將來源像素解碼為 CanvasImageSource，透過 drawImage 的九引數形式將子矩形複製到離屏 canvas，最後用 canvas.toBlob() 將離屏 canvas 編碼為 PNG。所有操作都在瀏覽器分頁中完成——不上傳、不經過伺服器、不使用遠端渲染。 解碼步驟比表面上看來更為關鍵。來自 <input type='file'> 或拖放 DataTransferItem 的 File 物件透過 FileReader.readAsDataURL（或現代程式碼中的 URL.createObjectURL）讀取為 Blob URL，瀏覽器將其交給 Image 載入器。當平台的圖片編解碼器（Chromium 上為 libpng/libjpeg-turbo/libwebp，WebKit/Gecko 上為對應的解碼器）完成位元圖解碼後，Image 元素會觸發 'load' 事件。以非 CORS 方式載入的圖片會被視為「受污染」——getImageData 會拋出 SecurityError——因此切圖工具只使用 drawImage 而不讀取像素陣列，從而完全迴避 CORS 問題。對於非常大的圖片（長邊超過約 8K），某些引擎會將位元圖儲存在 GPU 記憶體中，因此 canvas.toBlob 可能會經過 GPU→CPU 讀回過程，在手機上約需 30-100 毫秒。 裁切是每個切片一次 drawImage 呼叫：ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)——前三對是來源矩形（sx, sy, sw, sh），後三對是目標 canvas 上的目標矩形。對一張 1920×1080 照片做 3×3 切割時，每個切片的來源矩形為 640×360，起始位置為 (col*640, row*360)。目標 canvas 的大小精確設定為切片尺寸（640×360），然後執行 canvas.toBlob(blob => ..., 'image/png') 來執行平台的 PNG 編碼器。選擇 PNG 而非 JPEG 是因為格線切片通常是乾淨的矩形裁切，帶有銳利的文字和 UI 元素，無損編碼很重要；JPEG 的 8×8 DCT 區塊會模糊邊緣。 批次下載使用 URL.createObjectURL 為每個 Blob 建立連結，透過 <a download> 合成點選觸發下載，並在短暫延遲後（通常 60-120 秒，即平台對未使用 Blob URL 的存活時間）撤銷 URL。對 9 個切片，這會連續觸發 9 次下載事件；部分瀏覽器會對來自同一分頁的多次下載進行節流，因此頁面通常會在點選之間加入 50-200 毫秒的 setTimeout 間隔。效能方面，手機上的瓶頸通常是 PNG 編碼器（libpng 每次編碼為單執行緒），而非 drawImage；對 9 個 1080p 切片，中階 Android 約需 200-500 毫秒，桌面 Chromium 約需 100-200 毫秒。
- 流程：FileReader 或 URL.createObjectURL → Image 元素 → HTMLCanvasElement → drawImage 九引數裁切 → canvas.toBlob('image/png') → URL.createObjectURL + <a download>。
- drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 是九引數重載，將來源矩形 (sx,sy,sw,sh) 裁切到目標矩形 (dx,dy,dw,dh)；這是執行切割的單一 API 呼叫。
- 未提供 CORS 標頭的來源圖片會污染 canvas——getImageData 會拋出 SecurityError，因此切圖工具從不讀取像素陣列，僅進行位元塊傳輸和編碼。
- canvas.toBlob 是非同步且非阻塞的（回呼在後續微任務中觸發），而舊版的 canvas.toDataURL 是同步的，對大圖片會凍結主執行緒。
- 對 N×M 圖片做 3×3 切割時，每個切片為 (N/3) × (M/3)；不可整除的尺寸會在右/下邊緣產生 1 像素的餘數，由 Math.floor 處理，必要時加上明確的餘數切片。
- 選擇 PNG 而非 JPEG 用於格線切片，是因為每個切片都是帶有銳利邊緣（文字、UI、圖表）的矩形裁切，8×8 DCT 區塊會模糊邊界線。
- 批次下載為每個 Blob 使用 URL.createObjectURL + <a download> 點選；瀏覽器會對同一分頁的多次下載進行節流，因此頁面通常在點選間留 50-200 毫秒間隔，並在點選後撤銷 Blob URL 以釋放記憶體。
- 效能瓶頸在平台的 PNG 編碼器（libpng 每次編碼為單執行緒），而非 drawImage；9 個 1080p 切片在中階手機上約需 200-500 毫秒，在桌面 Chromium 上約需 100-200 毫秒。
範例
正方形 1:1 切割（Instagram 貼文）
輸入： 1080 x 1080 px
輸出： 9 張 360 x 360 px 切片（3x3 九宮格）
用途： Instagram 輪播預覽、小紅書九宮格貼文橫式 16:9 切割（YouTube 縮圖）
輸入： 1920 x 1080 px
輸出： 9 張 640 x 360 px 切片（3x3 九宮格）
用途： YouTube 縮圖 A/B 測試、多平台橫幅變體直式 9:16 切割（TikTok / Reels）
輸入： 1080 x 1920 px
輸出： 9 張 360 x 640 px 切片（3x3 九宮格）
用途： 短影片封面探索、限時動態風格預覽常見問題
圖片九宮格工具能做什麼？
它會把一張圖片切割成等分網格（例如 3×3、2×4），讓你可以把每一格分別發成 Instagram 風格的單張貼文，或拼成拼圖／海報。每一格會匯出成獨立的 PNG/JPEG 檔案。
圖片會被上傳嗎？
不會。網格切割完全在你的瀏覽器中以 canvas 完成，圖片位元組從不離開你的裝置。
支援哪些網格尺寸？
常見預設有 3×3（Instagram 大圖九宮格）、3×1（橫幅三聯圖）、2×2、4×4、9×16。一般也允許自訂列與欄。最大值取決於瀏覽器記憶體——對高解析度來源使用過大的網格可能超出 canvas 大小限制。
要怎麼依正確順序把切片發到 Instagram？
Instagram 的網格依「右到左、上到下」排列（所以 3×3 時第一篇貼文會出現在右上，最後一篇在左下）。頁面匯出的切片會標上 1-9 號——依 9、8、7、6、5、4、3、2、1 的順序上傳，才能對齊視覺版面。部分頁面會提供順序提示說明。
為什麼匯出的切片有點對不齊？
來源圖片的尺寸必須能被網格整除才能整齊切割。頁面會選擇裁掉右側／下側邊緣，或把圖片縮放至吻合，請確認目前選的是哪一種。實體拼貼時，子像素誤差會在整個網格上累積。
輸出格式與解析度為何？
預設是 PNG，沿用來源解析度。Instagram 建議每塊切片至少 1080×1080 像素（4×4 網格時來源需 4320×4320）。實體海報列印時，請使用更高解析度的來源；若你的印表機支援，可採用 TIFF 等列印友善格式。
可以在切片之間加上間隔嗎？
部分版本提供「間距」選項，可在每格周圍留出白色邊距，模擬 Instagram 網格中的細縫。如果你希望畫面看起來和原圖一致，可調整間距寬度以對應社群平台的預覽效果。