「合併圖片」工具可將兩到十二個本地點陣圖檔案合併成單一 PNG 檔,排列方式由您選擇,且整個作業都在您目前的瀏覽器分頁中執行,不會上傳任何內容。每個選取的檔案會依您選取的順序讀取,透過瀏覽器的影像點陣路徑解碼,然後以原始像素大小繪製到單一畫布上——絕不縮放、絕不裁剪、絕不重新上色。所選的排列方式決定配置:水平排列將影像由左至右排列,以最高的影像作為畫布高度;垂直排列則由上至下堆疊;格狀排列則依影像數量平方根的無條件進位,將影像排入接近正方形的矩陣中。可設定 0 到 100 像素的間距來分隔每個項目,六位數色彩選擇器會填滿未使用的畫布區域及影像之間的空白,瀏覽器的 PNG 編碼器則會產生您下載的最終檔案。單檔大小上限為 25 MiB,總選取大小為 100 MiB,畫布邊長為 8,192 像素,面積約為 3,200 萬像素,這些限制都是為了讓各瀏覽器的記憶體用量保持在可預測的範圍內。
為何要將圖片合併成單一檔案
人們搜尋將圖片合併成一張的方法,通常都是出於非常實際的理由,而這項任務幾乎都是希望取得一個可分享的單一檔案,而不是裝滿個別素材的資料夾。
- 將前後對比或逐步操作的順序合併成一張圖片,而不是多個附件。
- 製作一張比較圖——色票、產品款式、應用程式擷圖——以便放入投影片或聊天視窗中。
- 將收據、擷圖或掃描頁面堆疊成單一 PNG,方便以單一檔案傳送或封存。
- 不需開啟完整的相片軟體,就能用數個較小的素材準備水平橫幅或垂直限時動態圖片。
- 將兩到十二個素材放到乾淨的畫布上並使用自訂背景,讓結果符合現有的模板。
如果上述情況符合您面臨的問題,「合併圖片」所提供的本地瀏覽器做法能讓整個操作既私密又可預期。在解碼、排列、繪製或編碼的過程中,您的檔案不會離開裝置,而且每一條畫布規則都明文列出,因此輸出大小是您在下載前就能驗證的。
合併多張圖片:精確的操作流程
以下是工具內部精確且可重複的操作流程,以及您能控制的每個輸入與輸出步驟。
- 開啟工具,依您想要的順序挑選兩到十二張支援的點陣圖。可接受的格式包括 PNG、JPEG、WebP、GIF、AVIF 和 BMP。您在檔案挑選器中的選取順序,會決定最終排列中由左至右、由上至下或逐格的擺放位置。
- 選擇一種排列方式:水平、垂直或格狀。水平會以解碼後的像素尺寸由左至右排列影像;垂直則由上至下堆疊;格狀則會取影像數量平方根的無條件進位,作為最小接近正方形的欄數。
- 設定介於 0 到 100 像素之間的間距,然後挑選一個六位數的背景色來填滿未使用的畫布空間及影像之間的區域。
- 選擇「合併圖片」來產生輸出結果。請在預覽畫面上確認所顯示的尺寸;畫布任一邊都不會超過 8,192 像素,總面積也不會超過約 3,200 萬像素。
- 下載產生的 PNG。這個檔案是由瀏覽器透過 canvas 的 toBlob 路徑編碼而成,產生的是單一的靜態影像——來自 GIF、WebP 或 AVIF 來源的動畫將無法保留。
哪些保持不變,哪些會改變
來源檔案的某些屬性會在輸出中改變,有些則會維持鎖定。了解哪些是哪種,能避免意外發生。
- 來源像素尺寸會保留。每張解碼後的影像都會以原始大小繪製,並置中於所屬的排列儲存格或列位置中。不會進行拉伸、裁剪或改變長寬比。
- 所選的不透明背景會在任何點陣圖繪製前先塗到畫布上,因此 PNG 中的透明像素會變成該背景顏色。您無法使用此工具讓整個輸出維持透明,但可以用它來為堆疊的圖片加上品牌色彩。
- 輸出為單一靜態 PNG。動畫 GIF、動畫 WebP 和動畫 AVIF 輸入只會貢獻瀏覽器所解碼的那一格畫面,動態效果會遺失。
- EXIF、色彩描述檔標籤、圖層資料、原始檔名以及任何非像素的中繼資料都不會被帶入輸出。您取得的 PNG 僅根據像素值編碼而成,並非來自來源檔案的容器資訊。
- SVG 輸入會被刻意拒絕。SVG 可能參考外部資源或帶有非常大的繪製指令,因此將其排除有助於讓這個本地點陣圖流程保持在可預期的範圍內。
排列方式比較
這三種排列方式的行為不同,您選擇的方式會同時影響輸出尺寸,以及畫布內部處理尺寸不一輸入的方式。
| 排列方式 | 最適合 | 方向 | 產生的畫布 |
|---|---|---|---|
| 水平 | 圖示排、色票、前後對比圖 | 由左至右 | 寬度等於各寬度加上間距的總和;高度等於最高的影像;較矮的影像會垂直置中 |
| 垂直 | 連續畫面、掃描堆疊、限時動態圖片 | 由上至下 | 高度等於各高度加上間距的總和;寬度等於最寬的影像;較窄的影像會水平置中 |
| 格狀 | 照片群組、比較磚塊、心境板 | 逐格、以列為主 | ceil(√n) 欄;每格以最寬和最高的解碼影像為大小;空白的儲存格與未使用的空間會顯示背景色 |
嚴格限制及其存在的原因
您會遇到的每一項限制,都是為了讓瀏覽器內部操作保持穩定,而不是出於產品偏好。
| 限制 | 數值 | 原因 |
|---|---|---|
| 最少圖片數 | 2 | 一張影像不算是合併 |
| 最多圖片數 | 12 | 讓格狀排列維持在小範圍,並讓畫布邊數可預測 |
| 單檔大小 | 25 MiB | 限制單次解碼造成的記憶體暴增 |
| 總大小 | 100 MiB | 限制累計的點陣圖記憶體 |
| 畫布邊長 | 8,192 px | 低於常見的瀏覽器畫布大小上限 |
| 畫布面積 | 約 3,200 萬像素 | 避免大型格狀配置時的記憶體配置失敗 |
| 間距範圍 | 0 到 100 px | 用於排列計算的有界整數輸入 |
| 接受格式 | PNG, JPEG, WebP, GIF, AVIF, BMP | 瀏覽器可解碼的點陣圖類型 |
| 拒絕格式 | SVG | 限制外部資源與大型繪製樹 |
即使是看起來熟悉的副檔名,仍可能因為位元損壞或瀏覽器不支援其編解碼器而導致失敗。如果檔案被拒絕,請改用另一份副本,或透過 「影像壓縮工具」 將其重新編碼為標準 PNG 或 JPEG 後再合併。
隱私與作業執行位置
「合併圖片」工具的每個步驟都在您的分頁中於本地執行。解碼使用的是 MDN 上有文件記載的瀏覽器 createImageBitmap 路徑——createImageBitmap 會回傳 ImageBitmap 物件,讓頁面可以直接繪製,完全不必將來源位元組上傳到任何地方。將最終畫布編碼回 PNG 則使用同樣在 MDN 上有文件記載的 HTMLCanvasElement.toBlob 方法:toBlob 會透過可撤銷的 Object URL 產生可下載的檔案,而頁面會關閉在執行過程中建立的所有 ImageBitmap。這整個流程不會發出任何網路請求,因此來源檔案在操作前後都可以保留在您的本地磁碟上。
乾淨輸出的訣竅
- 順序很重要。您在挑選器中選取檔案的順序,就是它們在水平、垂直和格狀排列中出現的順序,因此在確認前請先停下來思考一下由左至右或由上至下的順序。
- 在建立排列時使用對比明顯的背景色,讓間距與置中效果清楚顯示,等位置確定後再切換為真正的品牌色彩。
- 如果您想要緊密的列或欄,請先裁切或調整來源的大小,讓高度或寬度大致相符。本工具本身不會為了配合而拉伸任何東西,而 「影像縮放工具」 可以在合併前將影像縮放至精確的像素尺寸。
- 只有在您真的需要較小的失真版本時,才將完成的素材透過 「PNG 轉 JPG」 處理。PNG 能保持銳利的像素和所選的不透明背景,因此在封存與分享時應優先選用 PNG。
- 如果您真正的目標是單一文件而非單一影像,那麼 「影像轉 PDF」 工具會將每張影像放在各自的頁面上,而不是將它們視覺上合併到同一張畫布。
若是為了印刷製作或需要管理色彩的合成——涉及 CMYK 轉換、ICC 描述檔或圖層檔案——請在匯出 PNG 後,於專用軟體中加以檢查。本工具不會保留色彩描述檔、不會針對特定的輸出位元大小,也不會將來源中繼資料帶到輸出中,因此對於印刷用途來說,下游的檢查是確認這些屬性的唯一方法。
相關閱讀:如何從 PNG 產生網站圖示:尺寸與 HTML 連結。
相關閱讀:將圖片合併成單一檔案:排列方式、限制與輸出。