陰影是一種柔邊或硬邊的偏移輪廓,繪製在影像後方,讓前景看起來像是從背景浮起。若想在不將像素上傳到遠端伺服器的情況下,為 JPG、PNG 或 WebP 加上可控的陰影,最可靠的方式就是透過 HTML Canvas 陰影渲染器在本地瀏覽器中渲染。瀏覽器的 Canvas API 將 shadowBlur、shadowOffsetX、shadowOffsetY、shadowColor 與 globalAlpha 開放為獨立的屬性,因此每一項——包括將陰影向左或向上移動的負值偏移——都可以在繪圖開始前以整數設定並驗證。為影像加上陰影工具封裝了完全相同的 Canvas 流程:接受一個不超過 25 MiB 的本地影像,以所選的陰影狀態繪製一次來源圖,再以無陰影狀態繪製一次,確保前景保持清晰,接著編碼成 PNG,其畫布刻意比來源圖更大,如此陰影便不會在原始邊緣處被切掉。
為影像加上陰影實際上做了什麼
陰影能為平面影像營造出深度的錯覺。一張擺在白色背景上的運動鞋照片、電子商務卡片上的產品去背圖、為可列印貼紙匯出的貼紙,或置於主視覺橫幅中的縮圖,在它們後方幾像素處加上柔邊的偏移輪廓後,看起來都會更加穩定。大多數影像編輯器都提供陰影功能,但實作方式很重要。生成式 AI 陰影產生器可能會捏造出高光、接觸陰影或地面反射,看起來很驚人,卻偏離了原始像素;手動的 Canvas 渲染器則會對相同的輸入產生相同的陰影,這正是你在處理可重複的模型稿與一致的縮圖組時所需要的。如果你的目標是直接的點陣陰影——可預測的幾何、透明背景、毫無意外——那麼具決定性的瀏覽器渲染器通常是更簡單的選擇。
每個陰影控制項的意義
五個輸入控制著陰影。它們共同描述了你希望在來源影像後方繪製的輪廓。所有數值在任何像素被繪製之前都會經過驗證,因此超出範圍的值會產生明確的錯誤,而不是產生損壞的 PNG。
| 控制項 | 接受範圍 | 行為 |
|---|---|---|
| 水平偏移 | -500 到 500 的整數像素 | 正值將陰影向右移動;負值將其向左移動。 |
| 垂直偏移 | -500 到 500 的整數像素 | 正值將陰影在輸出中向下移動;負值將其向上移動。 |
| 模糊半徑 | 0 到 250 的整數像素 | 0 產生硬邊偏移;較大的值會柔化陰影邊緣。 |
| 不透明度 | 0 到 100% 的整數百分比 | 100 為完全不透明;0 則完全隱藏陰影。 |
| 顏色 | 僅限六位數十六進位 | 精確的顏色,例如黑色為 #000000,或深灰藍色為 #1F2937。 |
這些限制直接對應到 Canvas 渲染器。shadowBlur 接受整數半徑,shadowOffsetX 與 shadowOffsetY 接受整數像素偏移,而 shadowColor 則解析 CSS 顏色字串。工具不接受像 #000 這樣的簡寫十六進位,也不接受具名顏色,因此你輸入的值就是瀏覽器實際繪製的值。
如何在瀏覽器中為影像加上陰影
- 開啟「為影像加上陰影」工具,並從你的裝置選擇一個本地 JPG、PNG 或 WebP。檔案必須可被瀏覽器解碼,且大小不得超過 25 MiB,其解碼後的尺寸也必須符合工具受限的畫布預算。
- 輸入水平與垂直偏移,以 -500 到 500 之間的整數像素為單位。水平正值將陰影向右移動,負值將其向左移動;垂直正值將陰影在輸出中向下移動,負值將其向上移動。
- 輸入 0 到 250 之間的整數模糊半徑、0 到 100 之間的整數百分比不透明度,以及一個六位數十六進位顏色,例如 #000000。
- 選擇「Add shadow」。工具會回報新的擴展寬度與高度、編碼後的檔案大小,以及結果的預覽。預覽可能會被縮小以符合頁面大小,但下載的檔案會保留自然的輸出解析度。
- 下載產生的 PNG。檔案以來源檔命名,例如 portrait-shadow.png。更換來源檔或任何設定都會使先前的結果失效,並撤銷其暫時的下載網址,因此請務必在完成所有調整後再下載。
為何下載的影像比來源大
陰影需要在來源影像周圍預留空間才能繪製。輸出畫布會在每一側預留兩倍模糊值的空間,然後再加上受影響方向上偏移的絕對值。因此每個維度的公式為:
output_width = source_width + (2 × blur) + (2 × blur) + |horizontal_offset| output_height = source_height + (2 × blur) + (2 × blur) + |vertical_offset|
以一張 40 × 20 的來源圖為例,設定向右 8 像素偏移、向上 4 像素偏移,以及 6 像素的模糊:
- output_width = 40 + (2 × 6) + (2 × 6) + |8| = 40 + 12 + 12 + 8 = 72 像素
- output_height = 20 + (2 × 6) + (2 × 6) + |−4| = 20 + 12 + 12 + 4 = 48 像素
因此下載的 PNG 為 72 × 48。原本 40 × 20 的影像會置於這個較大的畫布之中,水平方向每側有 12 像素的模糊空間,垂直方向每側也有 12 像素的模糊空間,再加上你所選擇方向上的偏移量。這就是為什麼負的垂直偏移會將畫布向上擴展,而負的水平偏移會將其向左擴展——多出的空間必須有地方擺放,而工具會將其放在陰影所指的那一側。原始影像會被放置在擴展區域內,如此一來正常的陰影才不會在原本的影像邊緣處被靜默裁切。
本地處理代表什麼都不會離開你的瀏覽器
所有的解碼、繪製、編碼、預覽與下載建立作業,都在目前的瀏覽器分頁中完成。工具不會將你的影像上傳到遠端影像服務,也不會將其像素傳送給雲端 AI 模型;你所選的檔案會由瀏覽器的影像解碼器讀取、繪製到 Canvas 元素中,並重新編碼為 PNG,全程都不曾離開你的裝置。這對於尚未發布的產品照片、包含未完成設計的內部模型稿,以及任何對像素機密性有實際考量的影像來說,至關重要。
下載本身是一個指向記憶體中 blob 的暫存物件網址。當你更換來源影像或任何陰影控制項時,先前的結果會立即失效,其網址也會被撤銷,因此重新執行後不會下載到過時的預覽。輸出檔名衍生自來源名稱,這讓你能在不覆蓋原始檔案的情況下,輕鬆管理一個裝滿各種陰影變體的工作資料夾。
AI 陰影產生器與本地 Canvas 渲染的比較
搜尋「為影像加上陰影」的結果中,常常會冒出一些承諾一鍵陰影效果、自動主體偵測與工作室級打光的 AI 影像編輯器。這類工具會對你的照片執行生成模型,產生的陰影可能包含原始像素中並不存在的高光、接觸陰影或地面反射。對於需要在大量影像間以可預測方式重複相同陰影的產品模型稿、貼紙表與縮圖組來說,具決定性的 Canvas 渲染器往往更為合適。
本地瀏覽器渲染器提供你五個直接的控制項——水平偏移、垂直偏移、模糊半徑、不透明度與顏色——並以完全相同的方式套用。陰影不會捏造超出你所指定偏移與模糊的幾何,輸出的 PNG 也會保留透明背景。如果你的目標是乾淨的矩形陰影,那麼這種可預測性通常正是你想要的;如果你的目標是能環繞主體、追隨光源,或模擬地面接觸陰影的擬真陰影,那麼具備專屬陰影工具的 AI 影像編輯器會是更合適的選擇,但請接受這個陰影將會被生成而非計算出來,且像素可能會被送到遠端服務。
輸入格式、限制與錯誤
| 項目 | 限制或行為 |
|---|---|
| 接受的檔案類型 | 瀏覽器可解碼的 JPG、PNG 或 WebP |
| 最大檔案大小 | 25 MiB |
| 最大來源尺寸 | 在配置記憶體前檢查,必須符合工具受限的畫布預算 |
| 陰影偏移範圍 | 每軸 -500 到 500 的整數像素 |
| 模糊範圍 | 0 到 250 的整數像素 |
| 不透明度範圍 | 0 到 100% 的整數百分比 |
| 顏色格式 | 僅限六位數十六進位;不接受簡寫,也不接受具名顏色 |
| 輸出格式 | PNG,以來源檔命名(例如 portrait-shadow.png) |
任何超出這些限制的情況——不支援的檔案類型、空檔案、解碼後過大的影像、不可能存在的輸出尺寸、解碼錯誤、缺少 Canvas 支援,或 PNG 編碼失敗——都會產生明確的錯誤,而不是產生損壞的 PNG。這些檢查會在任何像素被繪製之前執行,因此未通過驗證的檔案絕不會佔用工作記憶體,也不會產生不完整的結果。
什麼時候簡單的陰影是正確的選擇
直接的 Canvas 陰影很適合用於可預測的設計工作。常見的適用情境包括:整個目錄中需重複相同陰影角度的電商產品卡、需要從可列印背景浮起的每張貼紙的貼紙表、置於橫幅或文章主視覺中的社群媒體縮圖、將標誌與柔和接觸陰影配對的簡報模型稿,以及只需要 1–4 像素細微模糊就能將圖示與卡片區分開的輕量級 UI 元件。
這個工具有其刻意的限制。它不會偵測照片中的主體,因此落在邊界矩形外的陰影仍會遵循來源的矩形邊界。它不會產生透視地面陰影、模擬工作室打光,或生成反射,也不會加上邊框或移除背景。Canvas 陰影模糊屬於瀏覽器渲染效果,而非印刷前製測量值,因此確切的羽化像素在 Chrome、Firefox 與 Safari 之間可能會略有差異,且輸出並不保證與 CSS box-shadow 完全位元等價。JPG 與 WebP 來源會被解碼為瀏覽器像素,因此其原始壓縮位元組與中繼資料不會保留在輸出中。如果你需要上述任何功能,配備陰影工具的生成式 AI 影像編輯器可能更為合適;如果你需要的是日常點陣作業中快速、可重複、具決定性的陰影,那麼本地 Canvas 渲染器便是務實的選擇。
想深入了解,請參閱在瀏覽器中像 Canva 一樣為影像加上陰影。
想深入了解,請參閱在不上傳的情況下將影像轉換為文字 ASCII 藝術。