是的 — 你可以在不上傳檔案的情況下為圖片加上陰影,只要使用一個在目前分頁內完全解碼、算繪並匯出結果的瀏覽器工具即可。來源圖片從你的本機磁碟讀取,經由 JavaScript 和瀏覽器的 Canvas API 處理,再下載成新的 PNG,因此原始像素從未在網路上傳輸,也從未接觸遠端伺服器。現代瀏覽器內建完整的 Canvas 支援與 PNG 編碼器,而這正是「無需上傳」的陰影工作流程得以實現的關鍵。透過像 為圖片加上陰影工具這類工具,你只需開啟頁面、挑選本機的 JPG、PNG 或 WebP、設定以整數像素為單位的偏移量、模糊值、不透明度,以及精確的十六進位顏色,接著下載一張周圍帶有透明邊距、維持原始解析度的 PNG。Canvas 在繪製前會刻意預先擴張,每一邊加上兩倍模糊值,加上受影響那一邊的絕對偏移量,這樣陰影就不會在原圖邊緣被靜默裁切——這正是常見的初階實作陷阱。這種做法適用於產品模型、貼紙、縮圖、簡報元件,以及任何隱私或快速迭代比攝影棚級精準打光更重要的情境。

無需上傳的陰影工具究竟做了什麼
針對「能不能在不上傳檔案的情況下為圖片加上陰影」這個問題,簡短的回答是:可以,而且機制相當直觀。當你透過瀏覽器的檔案輸入從裝置挑選一個檔案時,瀏覽器會在本機讀取位元組;頁面上的 JavaScript 使用內建的影像解碼器將這些位元組解碼成像素;接著將像素繪製到 HTML canvas 元素上;canvas 再編碼回 PNG;最後透過臨時的物件 URL 提供下載。每一個步驟都在你的電腦上執行。沒有任何 HTTP 要求將來源圖片送到第三方影像服務,也沒有任何雲端管線處理你的像素。輸出的 PNG 是在你挑選檔案的同一個分頁內產生的。
當來源圖片包含尚未完成的作品、客戶交付物、未上市的產品、你不想被存進別人資料庫的人像照,或內部系統的截圖時,這點最為關鍵。光是上述任何一個理由,就足以讓「無需上傳」的工作流程成為預設選擇;唯一的實際取捨在於,你必須使用明確公開其檔案處理方式的瀏覽器工具,而不是去信任一個無法驗證上傳行為的通用「免費線上陰影」網站。
純瀏覽器的陰影管線如何運作
無需上傳的陰影工具分四個簡短階段執行。第一,瀏覽器透過檔案輸入或拖放區讀取來源檔案,將檔案以記憶體中的 blob 形式呈現,整個過程完全沒有網路活動。第二,頁面透過呼叫 createImageBitmap,或將 img.src 設為物件 URL,把該 blob 轉成影像元素,此時瀏覽器內建的影像解碼器會將 JPG、PNG 或 WebP 位元組轉成原始的 RGBA 像素——這和瀏覽器在頁面上顯示任何圖片所用的解碼器相同。
第三,頁面使用 drawImage 將這些像素繪製到 HTML canvas 上,並依據你輸入的偏移量、模糊值、不透明度與顏色設定 Canvas 的陰影狀態。瀏覽器內部的陰影算繪器會以獨立的一道處理程序,在所繪製來源的後方套用模糊、顏色與不透明度。MDN 對於 shadowBlur 的參考說明將其描述為瀏覽器定義的高斯模糊半徑,並明確指出實際像素在不同瀏覽器引擎之間可能略有差異。第四,canvas 透過 canvas.toBlob('image/png') 編碼回 PNG,包裝成臨時的物件 URL,再交給瀏覽器的下載管理員。當你更換來源或任何設定時,先前的物件 URL 會被撤銷,避免從頁面外洩。
由於所有處理都在頁面內進行,這條管線也易於稽核。你可以開啟瀏覽器的開發者工具,切到 Network 分頁,確認在產生陰影的過程中沒有任何影像位元組離開裝置。通常唯一會看到的網路要求,就是當初載入這個頁面本身的那一個。
一步步為本機圖片加上陰影
- 在瀏覽器中開啟「為圖片加上陰影」工具,點擊檔案挑選器,或將本機的 JPG、PNG 或 WebP 拖到放置區。請確認檔案可被瀏覽器解碼,且大小不超過 25 MiB。
- 將水平與垂直偏移輸入為 -500 到 500 之間的整數像素值。正的水平值會讓下載出來的圖片中的陰影向右偏移,負值則向左;正的垂直值會向下偏移,負值則向上。
- 將模糊半徑設為 0 到 250 之間的整數像素值。模糊值同時控制了工具會在來源周圍預留多少額外的透明 canvas,避免陰影被裁切。
- 將陰影不透明度選為 0 到 100 之間的整數百分比,接著以六位數十六進位數值(例如 #000000 表示純黑陰影)輸入陰影顏色。
- 選擇「加上陰影」。頁面會重新算繪擴張後的 canvas,回報精確的輸出寬度、高度與編碼後的檔案大小,並撤銷先前的結果。
- 點擊下載連結以儲存 PNG。檔案名稱會以來源檔名加上 -shadow 後綴,例如 portrait-shadow.png,因為 PNG 是唯一能在原始矩形之外攜帶透明像素的輸出格式。
陰影控制項與擴張後的輸出
這個無需上傳的陰影工具上的每個控制項都是整數或精確的十六進位字串,且各自有固定的接受範圍。這是刻意的設計:整數輸入讓 canvas 尺寸的計算可預測,而固定的十六進位格式則能讓陰影顏色在不同瀏覽器之間保持一致。
| 控制項 | 接受格式 | 範圍 | 對輸出的影響 |
|---|---|---|---|
| 水平偏移 | 整數像素 | -500 到 500 | 將陰影向右(正值)或向左(負值)偏移;在對應那一邊預留 canvas。 |
| 垂直偏移 | 整數像素 | -500 到 500 | 將陰影向下(正值)或向上(負值)偏移;在對應那一邊預留 canvas。 |
| 模糊半徑 | 整數像素 | 0 到 250 | 在 canvas 的每一邊加上兩倍模糊值作為羽化用的透明邊距。 |
| 不透明度 | 整數百分比 | 0 到 100 | 控制陰影顏色顯現的強度,100 為完全不透明,0 為不可見。 |
| 顏色 | 六位數十六進位 | #000000 到 #FFFFFF | 陰影的精確 RGB 顏色,沒有透明度元件。 |
只要一個簡單的計算範例,就能看出模糊、偏移與最終 canvas 大小之間的關係。取一張 40 乘 20 的來源圖片,套用 8 像素向右偏移、4 像素向上偏移,以及 6 像素的模糊。模糊在每一邊貢獻 2 × 6 = 12 像素的邊距。向右偏移在右側貢獻 8 像素的額外 canvas,向上偏移則在上方貢獻 4 像素的額外 canvas。因此擴張後的輸出為:
- 寬度:40 + 12(左邊距)+ 12(右邊距)+ 8(右偏移)= 72 像素
- 高度:20 + 12(上邊距)+ 12(下邊距)+ 4(上偏移)= 48 像素
原本的 40 × 20 圖片會繪製在這個 72 × 48 的 canvas 內部,因此陰影有足夠空間向左、向右與向下延伸而不被裁切,工具會在算繪後回報精確的擴張後尺寸以及編碼後的 PNG 大小。在這條管線中,來源實際上會被繪製兩次:一次套用所選的陰影狀態,另一次則清除陰影後再繪一次,確保可見的前景像素保持銳利,不會被自己的半透明陰影效果柔化。
本機瀏覽器陰影的適用時機
無需上傳的陰影工具是若干經常性工作的最佳選擇。貼紙與徽章圖稿通常以透明 PNG 為起點,需要一個尊重 alpha 通道的可控陰影;離線的 Canvas 算繪器能在來源以外保留透明度,只在來源的 alpha 實際投射陰影之處補上陰影像素。部落格文章、市集上架或聊天大頭貼用的縮圖,常需要一抹細微的深色陰影,讓前景從雜亂的背景中浮現出來;在本機算繪讓你可以反覆調整偏移與模糊,而不必每次都重新上傳原始檔。在透明或彩色背景上的產品模型,則需要一個能配合你打算模擬的相機角度的、可預測的陰影;當唯一會改動的只是幾個文字框和重新算繪時,這種調校會更輕鬆。
只要圖片帶有任何敏感性,這也是正確的選擇:草稿中的產品照片、未公開的活動視覺、私密的人像照、內部儀表板的截圖,或客戶的品牌素材。由於來源位元組從不離開裝置,因此沒有需要清除的伺服器端紀錄,沒有需要考量的第三方 CDN,也沒有對遠端影像服務留存政策的隱含同意。對於需要反覆微調並匯出的工作流程,光是省下上傳步驟所節省的時間,很快就會累積起來。
Limitations to Know Before You Start
A Canvas-rendered drop shadow is not a print prepress measurement, so the feather can vary slightly between Chrome, Firefox, Safari, and other browser engines even when the controls are identical. The result is consistent enough for screens, mockups, thumbnails, and fixtures, but it should not be quoted as a Photoshop feather value to a print shop. The tool does not claim byte-for-byte equivalence with a CSS box-shadow rule either; the two are deliberately different renderers, and the trade-off for local processing is that you give up a tight pixel-perfect match.
There are a few hard limits worth noting. Input files must be browser-decodable JPG, PNG, or WebP files no larger than 25 MiB; anything outside that is rejected with a visible error. JPG and WebP sources are decoded to browser pixels, so the original compression bytes and any EXIF or XMP metadata are not retained in the output — if you need to keep camera metadata, run the source through a dedicated local EXIF tool first. The tool does not detect the subject, simulate a perspective floor shadow, or generate studio lighting; for those jobs you still need a dedicated editor. And because the canvas budget is bounded, oversize sources or shadow settings that produce impossible output dimensions will surface a visible error rather than a silent failure.
If you need a transparent PNG that keeps the original pixel size of the source and only gains a shadow on the outside, no-upload browser tools are the most direct answer to the question of how to add shadow to an image without uploading it. The Add Shadow to Image tool follows exactly the workflow described above: pick a local file, enter whole-pixel offsets, blur, opacity, and an exact hex color, render an expanded canvas, and download a PNG whose transparent margins are sized to fit the shadow you asked for.
If you're weighing options, GIF Maker for Email Attachment: A No-Upload Workflow covers this in detail.
If you're weighing options, Optimize GIF to 256KB: A Realistic Browser Workflow covers this in detail.