在圖片周圍加上純色邊框，是最簡單的方法之一，可以把「為圖片加上文字」的意圖轉化為一幅完成且帶有外框的圖形。邊框會在原始像素之外加上一個可見的矩形外框，讓圖說、螢幕擷圖和社群貼文擁有乾淨的留白，而不必挑選字型、設定大小，或調整文字疊加的位置。使用 為圖片加入邊框 工具時，你只需選擇本機的 JPG、PNG 或 WebP 檔案，設定介於 1 到 500 像素之間的整數邊框寬度，挑選一個六位數的十六進位色彩，然後把加上外框的結果以 PNG 格式下載。畫布會在四個邊均勻地向外擴張，因此原始像素會保留在原本的座標位置，絕不會被裁切、拉伸、重採樣、模糊或覆蓋。因為解碼、繪圖與 PNG 編碼都在瀏覽器中執行，原始檔案絕不會被上傳。其權衡在於，邊框是一種扁平的外框，而不是排版文字——如果你確實需要在圖片上疊加字母或字元，另一個工具會更合適。如果你確實需要的是邊距、彩色邊距，或圍繞現有相片的橫幅式邊緣，採用聚焦在邊框的做法，通常比開啟一套完整的編輯器來得更快。
為什麼邊框能解決「為圖片加上文字」的需求
「為圖片加上文字」這句話道出了一項真實且常見的需求:人們想要在現有相片的上方或周圍加上某些視覺元素，通常是在分享到社群媒體、簡報，或印刷講義之前。文字疊加是最熟悉的選項，但它並非唯一的方法。純色邊框能達到許多相同的目的:
- 它能為螢幕擷圖加上外框，使其在部落格文章或 Notion 頁面中看起來更具設計感。
- 它能在產品相片周圍加入彩色邊緣，使其從雜亂的背景中脫穎而出。
- 它能在人像相片周圍創造「護照照片」風格的邊距。
- 它能為橫幅式設計定義一條邊緣，用於頁首主視覺區塊頂端或行銷電子郵件內部。
在上述每一種情況中，目標都是改變圖片的可見邊界，而不是在圖片上渲染字母。純色邊框正是如此——它改變的是邊界——而且能產生可預期、像素精確的結果，任何瀏覽器都能渲染。因為邊框繪製在原始矩形之外，每一個原始像素都會以原始的座標比例保留下來，這能讓螢幕擷圖保持銳利，並避免重採樣可能帶來的模糊感。
如果真正目標是在相片上加入字元、浮水印或註解標示，請改用文字疊加工具。如果真正目標是加上外框、邊距或彩色邊緣，那麼邊框就是聚焦的解決方案。
如何為圖片加上純色邊框
請依照下列步驟，使用「為圖片加入邊框」工具為本機圖片加上外框:
- 開啟工具，點擊以選擇本機的 JPG、PNG 或 WebP 檔案。檔案會留在瀏覽器分頁內，不會被上傳。
- 在邊框欄位中輸入整數的邊框寬度。此工具接受介於 1 到 500 像素之間的任何數值。
- 在色彩欄位中輸入六位數的十六進位色彩(例如，#FFFFFF 代表白色，#000000 代表黑色，或 #1E90FF 代表道奇藍)。格式錯誤的色彩值會被拒絕並顯示明顯的錯誤訊息。
- 選擇「加入邊框」。工具會擴張畫布，以選定的色彩填滿新增加的外圍區域，並在邊框偏移的位置繪製一次來源圖片。
- 確認結果區顯示的擴張後尺寸。新寬度等於來源寬度加上兩倍邊框，新高度等於來源高度加上兩倍邊框。
- 確認結果低於 20 百萬像素的畫布上限，然後選擇「下載」，將加上外框的 PNG 儲存到裝置上。
- 若想嘗試不同的外框，變更檔案、尺寸或色彩即可;先前的結果會失效，其暫時性的 Object URL 也會被釋放，以免過時的非同步匯出取代較新的選擇。
邊框幾何與輸出尺寸
加上外框後的輸出幾何遵循一條簡單的規則:邊框在四個邊上均勻加入，因此畫布在每個方向上都增加兩倍邊框寬度。20 像素的邊框會讓寬度與高度各增加 40 像素，所有來源像素都保留在原本的座標比例，並將來源置於新畫布中 x=20、y=20 的位置。原本透明的像素在圖片內部仍維持透明;新加入的外圍邊框則預設為不透明。
計算範例。假設來源圖片寬 800 像素、高 600 像素。在加上 20 像素的邊框後，輸出寬度為 800 + (2 × 20) = 840 像素，輸出高度為 600 + (2 × 20) = 640 像素。來源矩形在新畫布中的起始位置為 x=20、y=20。外框所增加的總面積為 (840 × 640) − (800 × 600) = 537,600 − 480,000 = 57,600 像素，正好等於四個邊框區域加總的結果。
下表整理了此工具官方定義的邊界。這些是工具在繪圖或匯出前所接受與強制執行的輸入與限制:
| 邊界 | 數值 |
|---|---|
| 邊框寬度 | 1 到 500 像素之間的整數 |
| 輸入格式 | JPG、PNG、WebP |
| 輸入檔案大小 | 最大 25 MiB |
| 輸出格式 | PNG(固定) |
| 輸出畫布 | 加入邊框後最大 20 百萬像素 |
| 色彩輸入 | 六位數十六進位(例如，#1E90FF) |
| 邊框邊數 | 四個邊各套用同一個寬度 |
因為輸出固定為 PNG，來源 JPEG 會被解碼再重新編碼，即使像素尺寸僅因邊框而增加，檔案大小仍可能改變。原本就含有透明度的 PNG 會在原始區域內保留透明度;新加入的外圍邊框則為不透明。
隱私與本機處理
邊框工具只需要來源圖片解碼後的像素，因此整個流程都能在單一瀏覽器分頁內執行。「為圖片加入邊框」工具會在本機解碼 JPG、PNG 或 WebP，配置大小符合新尺寸的畫布，以選定色彩填滿擴張區域，在邊框偏移處繪製一次來源圖片，將畫布編碼為 PNG，並產生一個暫時性的下載 URL。瀏覽器的 canvas drawImage API 會在 20 像素邊框的情況下，將來源定位在 x=20、y=20 的位置，而 canvas toBlob 步驟則會把繪製完成的畫布轉換成下載至裝置的 PNG 位元組。
檔案位元組、解碼後的像素、畫布以及下載 URL 都不會離開當前分頁。變更檔案、尺寸或色彩會使先前的結果失效，並撤銷被取代的 Object URL，以免過時的非同步匯出取代較新的選擇。尺寸無效、不支援的檔案、格式錯誤的色彩、過大的邊框、解碼失敗、缺少畫布支援，以及空的 PNG 輸出，都會以明顯的方式失敗，而非默默處理。
邊框不適合用於哪些情況
純色的矩形外框是一種特定的視覺處理方式，並非通用的圖片編輯器。「為圖片加入邊框」工具無法加入圓角、裝飾圖樣、漸層、陰影、圖說、印刷出血、色彩描述檔或向量邊框。它只會在四個邊套用同一個寬度;並無針對上、下、左、右個別寬度的控制項。若需進行色彩管理的印刷、精確的實體尺寸、批次處理、分層編輯或非破壞性的設計工作，桌面版圖片編輯器仍是較佳的選擇。
至於同樣不在本工具範圍內的相關瀏覽器任務，圖片縮放工具 會改變像素尺寸而不加入外框，而針對字母、圖說與浮水印，則應走另一條獨立的文字疊加流程。邊框工具的強項在於它的專注:在來源矩形周圍繪製一道扁平、不透明、均勻的外框，以 PNG 匯出，幾何可預期，且無需上傳。
想進一步了解，可參閱 如何在瀏覽器中為 Android 上的 GIF 加上文字。
想進一步了解，可參閱 文字轉 ASCII 藝術產生器中的色彩:你該知道的事。