在照片中加入陰影的做法，是在瀏覽器算繪出的影像副本上設定水平位移、垂直位移、模糊半徑、不透明度與顏色，然後將結果匯出為一張比原圖大的透明 PNG，這樣陰影才不會被裁切。陰影由瀏覽器的 Canvas API 在來源檔案於本機解碼後繪製；照片從不離開裝置。由於輸出畫布刻意擴大，在每個邊緣預留兩倍模糊值，再加上受影響那一側的絕對方向位移，因此即使位移將陰影向外推動數百像素，陰影的羽化邊緣仍能保持可見。這讓點陣陰影適用於商品照片、社群縮圖、貼紙表、模型 mockup，以及任何需要以乾淨的矩形裁切搭配可見主體光暈的場景。五個輸入值——X 位移、Y 位移、模糊、不透明度，以及一個六位數十六進位顏色字串——控制最終形狀，而 canvas shadow blur 屬於瀏覽器算繪效果，因此即使使用相同的五個輸入值，不同瀏覽器引擎之間的精確羽化像素仍可能略有差異。
為什麼陰影對照片很重要
陰影能將主體與背景分離、模擬環境遮蔽（ambient occlusion），並為平面影像增添深度。在電子商務商品頁面上，椅子照片下方的柔和陰影會讓椅子看起來像是放在地板上，而不是懸浮在頁面前。在社群縮圖網格中，統一的陰影能將各張獨立影像串成一組連貫的集合，讓每張照片讀起來像是一個物件，而非一片像素。在貼紙表上，細微的偏移陰影能為每張貼紙帶來具觸感的邊緣。在所有這些情況中，目標都相同：產生一張透明 PNG，在可見前景周圍帶有柔和、略為偏移的光暈。
照片通常不需要複雜的陰影。6 到 12 像素的模糊搭配單一方向 4 到 8 像素的位移，通常就能產生乾淨的效果。精確數字取決於來源解析度，因為 600 像素寬的商品照片可以承載比 64 像素圖示更大的絕對模糊，但陰影的形狀會依照這五個輸入值按比例縮放，且位移、模糊與畫布擴展之間的關係在任何尺寸下都保持不變。
決定陰影形狀的五個控制項
每一個由 為圖片加入陰影 工具產生的陰影都由五個數值描述。下表列出每個控制項、其允許範圍，以及它對算繪輸出的影響。
| 控制項 | 允許範圍 | 對算繪陰影的效果 |
|---|---|---|
| 水平位移 | -500 到 500，單位為整數像素 | 正值將陰影向右移動；負值將其向左移動 |
| 垂直位移 | -500 到 500，單位為整數像素 | 正值在輸出中將陰影向下移動；負值將其向上移動 |
| 模糊半徑 | 0 到 250，單位為整數像素 | 柔化陰影邊緣；數值越大，羽化範圍越寬 |
| 不透明度 | 0 到 100，單位為整數百分比 | 控制陰影在其所覆蓋表面上呈現的深淺程度 |
| 顏色 | 六位數十六進位（例如 000000） | 設定陰影的色調 |
工具會在算繪前驗證每個輸入。負值位移會在對應側加入畫布空間，確保陰影絕不會被畫在輸出矩形之外。大於零的模糊值會在畫布的每個邊緣預留等於兩倍模糊值的邊距，無論位移方向為何，這正是保證羽化邊緣永遠不會在原圖邊界處被裁切的關鍵。
如何在瀏覽器中為照片加入陰影
開啟「為圖片加入陰影」工具，並依照下列步驟操作。整個流程都在當前分頁中執行，不會上傳任何檔案。
- 選擇一個本機的 JPG、PNG 或 WebP 檔案。該檔案必須可被瀏覽器解碼，且大小不得超過 25 MiB。
- 查看顯示的來源尺寸與工具的像素限制，以確保輸出符合畫布預算。
- 輸入介於 -500 到 500 的整數像素水平位移。正值將陰影向右移動；負值將其向左移動。
- 輸入介於 -500 到 500 的整數像素垂直位移。正值在輸出中將陰影向下移動；負值將其向上移動。
- 輸入介於 0 到 250 的整數像素模糊半徑。數值越高會產生越柔和、越寬廣的羽化，並在每側預留更多的畫布邊距。
- 輸入介於 0 到 100 的整數百分比作為不透明度。對於大多數照片來說，40 到 60 之間的數值會呈現出柔和自然的陰影。
- 輸入六位數十六進位顏色，例如 000000 代表中性黑色陰影，或輸入自訂數值以產生帶色調的效果。
- 選擇「加入陰影」。工具會分別在有 canvas shadow 狀態與無該狀態下各算繪來源一次，然後將結果編碼為 PNG。
- 確認顯示的擴展後寬度與高度。這些數值包含模糊邊距以及受影響那一側的絕對方向位移。
- 選擇下載按鈕以儲存以來源命名的 PNG，例如 portrait-shadow.png。即使頁面上的預覽經過縮放以符合版面，檔案仍會保持完整解析度。
若來源或任何設定變更，先前的結果將失效，其暫存下載 URL 也會被撤銷，因此必須再次選擇「加入陰影」以重新產生輸出。
為什麼下載的檔案比來源大
輸出 PNG 幾乎一定會比原始照片更寬、更矮，或同時更寬又更高。這是刻意設計的：畫布會在每側預留兩倍模糊值，並在受影響那一側加上絕對方向位移。然後將原始影像置於該擴展區域內，使陰影的柔和邊緣與任何方向推移不會在舊影像邊界處被裁切。
以一張 40 乘 20 的影像為例，若設定 8 像素向右位移、4 像素向上位移，以及 6 像素模糊。輸出寬度為 40 + 2x6（左側模糊邊距）+ 2x6（右側模糊邊距）+ 8（絕對右側位移）= 72 像素。輸出高度為 20 + 2x6（頂部模糊邊距）+ 2x6（底部模糊邊距）+ 4（絕對向上位移）= 48 像素。因此陰影會落在 72 乘 48 的畫布中，而來源照片仍佔據其原本的 40 乘 20 矩形區域。同樣的公式適用於任何解析度：來源寬度加上四倍模糊再加上絕對水平位移，來源高度加上四倍模糊再加上絕對垂直位移。
適用於常見照片類型的陰影設定
不同的拍攝主體適用不同形狀的陰影。下表說明常見情境與通常能產生乾淨結果的控制項之間的對應關係。請將其視為起點，再依需求調整。
| 照片類型 | 位移（X、Y，單位 px） | 模糊（px） | 不透明度（%） | 備註 |
|---|---|---|---|---|
| 白底商品 | 0, 6 | 10-14 | 35-50 | 單一向下陰影表現出與地面接觸的感覺 |
| 人像或大頭照 | 4, 6 | 12-18 | 30-45 | 微小的對角線位移讓臉部從背景中浮起 |
| 貼紙或徽章 | 6, 6 | 4-8 | 60-80 | 較緊密的模糊與較高的不透明度，呈現清晰的印刷邊緣 |
| 應用程式或網頁縮圖 | 2, 4 | 6-10 | 40-55 | 小位移讓陰影留在卡片版面內 |
| 去背主體疊在照片上 | 0, 8 | 14-22 | 25-40 | 較低的不透明度可避免陰影與新背景競爭視覺 |
這些都是起點，並非一成不變的配方。較高解析度的來源影像可以承載按比例放大的位移與模糊，而不會讓陰影顯得過重。低解析度來源則適合使用較小的數字與較高的不透明度，以便在縮圖尺寸下仍能保持光暈可見。
本工具做不到的事
「為圖片加入陰影」工具是一款純粹的點陣陰影算繪器。它不會偵測主體、不會移除背景、不會加入邊框，也不會模擬攝影棚燈光。它無法產生透視地板陰影、長長的夕陽陰影，或任何需要知道影像中地面位置的效果。它也不聲稱能與 CSS box-shadow 位元級等價；canvas shadow blur 屬於瀏覽器算繪效果，而非印刷預壓測量值，因此不同瀏覽器引擎之間的精確羽化像素可能略有差異。對於需要像素級精度的印刷預壓陰影，專業編輯器才是合適的工具。
它能做到的事則是有界限且可預測的：一張本機影像、五個數值控制項、一個透明 PNG 輸出，以及刻意擴展的畫布，確保陰影永遠不會在原始邊緣被悄悄裁切。
本機處理與隱私
來源檔案在當前瀏覽器分頁中完成解碼、繪製、編碼、預覽與下載。本工具不會上傳照片，也不會將其像素傳送至遠端影像服務。JPG 與 WebP 來源會被解碼為瀏覽器像素，這代表原始的壓縮位元組與任何內嵌中繼資料都不會保留在輸出 PNG 中；若需要保留中繼資料，則需使用支援 EXIF 的流程。PNG 來源中的透明區域在輸出中仍維持透明，除非來源 alpha 本身對陰影產生貢獻。
無效的檔案類型、空檔案、解碼後尺寸過大的影像、解碼錯誤、不可能的輸出尺寸、缺少畫布支援，以及 PNG 編碼失敗等情況，都會以可見錯誤呈現，而非悄悄失敗——這對於一款每次算繪時都會在兩個維度上調整畫布大小的工具而言是恰當的行為。下載的檔案一律是 PNG，並以來源命名，例如 portrait-shadow.png，因為陰影通常需要原矩形影像外的透明像素，而 JPG 無法承載透明度。頁面上顯示的預覽可能經過縮放以符合版面，但儲存的檔案會保持根據來源尺寸與所選陰影設定計算出的自然輸出解析度，詳細說明請參閱瀏覽器的 Canvas shadowBlur 參考文件。
想深入了解，請參閱 在本機為多張影像套用線上照片濾鏡。