為圖片加上外框的做法,是將原始圖片繪製到一個更大的畫布上,四個邊緣使用相同的偏移量——20 像素的外框會讓寬度與高度各增加 40 像素(左側 20、右側 20、上方 20、下方 20),並將來源圖片放置在新 PNG 的 x=20、y=20 座標上。使用瀏覽器工具加上外框,代表從 1 到 500 像素之間挑選一個整數寬度、選擇一個六位數的十六進位顏色,然後讓畫布在每個邊緣等量擴張,再下載結果。原始圖片會在該外框偏移量位置合成到擴張後的畫布上一次,因此每個來源像素都維持原本的座標比例。畫布會先以所選的不透明顏色填滿,接著在偏移量位置繪製解碼後的來源一次,所以來源永遠不會被外框覆寫,圖片中既有的透明像素也會維持透明。這個工具不會裁切、拉伸、重採樣、模糊或遮蓋原始圖片——它只在圖片外側加入實心像素,並輸出一張你可以直接從瀏覽器分頁儲存的 PNG。
為圖片加上外框實際上做了什麼
用白話來說,「加上外框」的意思是圖片保留完整內容,但在外側包覆一個實心顏色的矩形。圖片本身不會被裁切、拉伸或重採樣——外框是畫布在繪製來源前先填入的一層獨立不透明像素。最終結果是一個更寬、更高的檔案,原始作品會完整保留在正中央。
這與調整大小不同,後者會改變圖片實際的像素尺寸。外框改變的是畫布;畫布內的圖片完全不動。它也和為圖片加上描邊不同,後者視覺概念相同——在圖片周圍加上一個實心邊框——但通常是像 Adobe Illustrator 或 Photoshop 這類編輯器內部的效果。為圖片加上外框工具只需要三個輸入就能得到同樣的結果:一個檔案、一個寬度、一個顏色。
由於畫布的填滿方式,會產生兩個視覺特性。第一,外框四邊的厚度永遠完全相同,因為公式會將外框寬度計算兩次——每個軸各一次——而來源是靠偏移量置中,而不是透過對齊計算。第二,來源圖片中既有的任何透明區域都會保留下來,因為外框只存在於來源矩形外側的畫布像素,絕不會進入矩形內部。
在 Adobe Illustrator 中
Adobe Illustrator 處理外框時是透過描邊、色票與外觀面板,而不是一個一鍵式的外框按鈕,這也是為什麼許多搜尋「add border to image illustrator」的人都會找到需要多個步驟的替代方案。Illustrator 中最常見的做法遵循一個簡短、可重複的流程。
首先,在 Illustrator 文件中置入或開啟你想要加框的圖片。接著使用矩形工具繪製一個矩形,水平軸大小為(圖片寬度 + 2 × 外框寬度),垂直軸大小為(圖片高度 + 2 × 外框寬度)。將矩形填滿你為外框選擇的實心顏色,並將它送到圖層堆疊的最底層,讓圖片疊在上方。最後,使用對齊面板將圖片置中於矩形,讓四邊可見的外框寬度相等。當你需要將邊框直接烘焙到圖片檔案中(而非作為獨立形狀)時,可以使用 Art Optimized(適用於向量內容)或開啟 PNG 透明度,將作品匯出為 PNG 或 JPG。
對只想加上實心矩形邊框的使用者來說,這個流程比實際需求更繁重。它還需要付費授權與一個儲存的 .AI 專案檔,而歸根究柢只是在單一圖片後方畫一個矩形。在 Illustrator 或直接在瀏覽器中完成相同任務,兩種方式最終都會得到一張 PNG,但瀏覽器路徑完全跳過了安裝與專案檔。
為什麼許多使用者改用瀏覽器工具
當任務正好就是前面描述的那種情況時——實心顏色邊框、已知的像素寬度、可以下載的 PNG——一個在本機執行的瀏覽器工具就是最合適的選擇。檔案不會被上傳,會保留在當前分頁中,結果就是一張已將外框作為畫布一部分合併的扁平化 PNG。沒有文件需要儲存、不必找描邊面板、不必對齊矩形,除了單一的下載按鈕之外也沒有額外的匯出步驟。
不過,權衡取捨是真實存在的。這種瀏覽器工具無法提供圓角、漸層、陰影、向量邊框、裝飾圖樣或印刷出血。如果這些是目標的一部分,任務已經超出實心平面邊框所能表達的範圍,適合的工具就是具備圖層與效果的桌面編輯器。對於單純的矩形邊框,瀏覽器工具使用起來更快、更容易重複,也免去為了畫一個矩形而安裝數 GB 應用程式的麻煩。
純本機處理對隱私與可重複性也很重要。由於解碼、繪製、編碼以及暫時性的下載網址都留在當前的瀏覽器分頁中,來源檔案不會離開裝置。更換檔案、外框寬度或顏色會使先前的結果失效並釋放舊的下載連結,因此流程不會在伺服器上留下過期的 PNG。
在瀏覽器中為圖片加上外框
- 在瀏覽器分頁中開啟「為圖片加上外框」工具。
- 從電腦中選擇一個本機的 JPG、PNG 或 WebP 檔案。檔案大小必須在 25 MiB 輸入上限之內,並使用上述三種格式之一。
- 在寬度欄位中輸入 1 到 500 像素之間的整數外框寬度。
- 使用顏色選擇器,或直接輸入六位數的十六進位值(例如 #000000 或 #FFFFFF)來挑選實心顏色。
- 選擇「加上外框」。畫布會在每個邊緣等量擴張;新寬度是原始寬度加上兩倍的外框,新高度是原始高度加上兩倍的外框。
- 確認預覽旁顯示的擴張後尺寸,然後下載結果。該檔案是一張將外框作為原始圖片周圍不透明畫布像素烘焙進去的 PNG。
如果輸出的畫布超過 20 megapixels,工具會顯示明顯的失敗訊息,而不會產生過大的檔案。此時請降低外框寬度,或先使用 圖片調整大小工具縮小來源,再加上外框。
外框如何改變畫布
外框寬度與最終畫布尺寸之間的關係是固定的:新寬度等於(來源寬度 + 2 × 外框),新高度等於(來源高度 + 2 × 外框)。來源圖片會繪製在偏移量 (外框,外框) 處,因此以 20 像素外框來說,圖片會位於比來源剛好多 40 像素寬、剛好多 40 像素高的畫布內的 x=20、y=20 位置。這是 MDN 的 CanvasRenderingContext2D.drawImage 頁面中記錄的標準 canvas-draw 模式,接著結果會交給 HTMLCanvasElement.toBlob 進行 PNG 匯出。
這個公式衍生出三項結果。外框四邊的厚度永遠相同——在這個工具中無法讓上方比下方更厚。如果輸出畫布超過 20 megapixels,將會被拒絕,這在來源非常大且外框很寬時可能發生。PNG 檔案大小幾乎都會增加,因為外框是以全新的像素編碼,而 PNG 壓縮取決於每個區域的細節多寡;寬闊的平面顏色外框壓縮效果很好。
為了快速參考,以純文字表示的公式如下:
最終寬度 = 來源寬度 + (2 × 外框) 最終高度 = 來源高度 + (2 × 外框)
| 情境 | 外框寬度 | 對畫布的影響 |
|---|---|---|
| 極細邊框 | 1 像素 | 每個軸各增加 2 像素;在螢幕上幾乎看不見 |
| 標準相片邊框 | 20 像素 | 每個軸各增加 40 像素;符合纖細襯邊外框 |
| 海報風格邊框 | 100 像素 | 每個軸各增加 200 像素;在一般印刷尺寸下清晰可見 |
| 最大外框 | 500 像素 | 每個軸各增加 1000 像素;在大型來源上可能觸發 20 MP 畫布上限 |
若想以不同角度檢視同一個流程,可參考 為 JPG、PNG 或 WebP 圖片加上實心外框指南,它從格式角度介紹同一個工具。
何時應繼續使用桌面編輯器
瀏覽器工具會繪製一個實心邊框並匯出一張 PNG。任何超出單一平面矩形的需求都會把任務推回桌面編輯器,在開始前了解界線在哪會很有幫助:
- 圓角——使用支援圓角半徑的圖片工具,或具有圓角半徑屬性的向量編輯器。
- 漸層、陰影、圖樣或雙重外框——使用 Illustrator 的外觀面板或 Photoshop 的圖層樣式。
- 具備精確實體尺寸的顏色管理印刷——使用支援 ICC 設定檔與明確 DPI 設定的工具。
- 批次處理——使用桌面腳本、Photoshop 動作或 Illustrator 批次處理器來逐一處理檔案。
- 分層、非破壞性編輯——將來源保留為圖層,並搭配日後可編輯的調整。
單張圖片、單一邊框的情境正好是瀏覽器工具的設計目的,針對這種情況,它在不犧牲精度的前提下省去了安裝步驟。如果目標超出「在一邊使用單一實心顏色」,桌面編輯器仍然是正確的下一站。