跳至主要內容
Lizely

圖片加入陰影

為本機 JPG、PNG 或 WebP 加上可控制的下拉陰影，不上傳圖片即可下載完整解析度透明 PNG。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇符合顯示檔案與畫素限制的本機 JPG、PNG 或 WebP。
  2. 2.設定整數畫素位移與模糊，再選擇陰影不透明度及顏色。
  3. 3.點選「加入陰影」、確認擴大後尺寸，再下載 PNG。

關於圖片加入陰影

圖片加入陰影會為一張本機圖片建立含瀏覽器繪製下拉陰影的新 PNG。選擇 JPG、PNG 或 WebP，輸入水平與垂直位移，設定模糊半徑、不透明度及顏色，再點選「加入陰影」。來源會在目前瀏覽器分頁內解碼、繪製並編碼；Lizely 不會上傳檔案，也不會把畫素傳送到遠端圖片服務。

位移接受 -500 至 500 的整數畫素。水平正值會把陰影移向右方，負值移向左方；垂直正值會在下載圖片中把陰影移向下方，負值則移向上方。模糊接受 0 至 250 的整數畫素，不透明度接受 0 至 100 的整數百分比。陰影顏色使用精確六位十六進位輸入。這些控制值經驗證後會傳給瀏覽器 Canvas 陰影繪製器。

輸出 Canvas 會刻意大於來源。每一邊都會預留模糊值的兩倍，並在受影響方向加上位移絕對值。因此，一張 40×20 圖片若向右位移 8 畫素、向上位移 4 畫素且模糊為 6 畫素，輸出會變成 72×48 畫素。原始圖片會放在擴大區域內，因此一般陰影不會在舊圖片邊界被暗中裁切。

工具會先以所選 Canvas 陰影狀態繪製來源，再關閉陰影重新繪製一次來源。第二次繪製能保持可見來源畫素清晰，避免半透明陰影處理柔化原始前景。透明 PNG 區域仍保持透明，只有來源 Alpha 產生陰影的位置例外。JPG 與 WebP 來源會解碼為瀏覽器畫素，因此原始壓縮位元組與中繼資料不會保留。

輸入必須是瀏覽器可解碼且不超過 25 MiB 的 JPG、PNG 或 WebP。配置前會依網站的受限 Canvas 預算檢查來源與擴大後輸出尺寸。無效類型、空檔案、過大的解碼圖片、不可行的輸出尺寸、解碼錯誤、缺少 Canvas 支援與 PNG 編碼失敗都會顯示錯誤。變更來源或任何設定都會使舊結果失效，並釋放其暫時下載 URL。

下載固定為依來源命名的 PNG，例如 portrait-shadow.png。使用 PNG 是因為陰影通常需要原始矩形圖片外側的透明畫素。結果會顯示精確擴大後寬高與編碼大小。頁面預覽可能為了符合版面而縮放，但下載檔會保留依來源及陰影設定計算出的自然輸出解析度。

Canvas 陰影模糊是瀏覽器繪製效果，不是印刷製程量測，因此不同瀏覽器引擎的精確羽化畫素可能略有差異。本工具不保證與 CSS box-shadow 逐位元組相同，也不會加入邊框、移除背景、偵測主體、建立透視地面陰影或模擬棚拍燈光。它適合直接的點陣下拉陰影、模型稿、貼紙、縮圖與重視本機處理及可預測 Canvas 邊界的測試素材。

方法與來源

驗證一張受限制的本機圖片與整數陰影控制值，依兩倍模糊邊距加上方向位移推導擴大 Canvas，先以 Canvas 陰影狀態繪製一次來源，再關閉陰影繪製一次，接著編碼 PNG、防止過期非同步工作覆蓋新結果，並釋放被取代的 Object URL。

常見問題

為什麼下載圖片比來源大？
Canvas 會預留模糊與方向位移所需空間，避免陰影在原始邊界被裁切。
陰影可以向左或向上延伸嗎？
可以。輸入負的水平或垂直位移，工具就會在對應方向增加空間。
透明 PNG 仍會保持透明嗎？
會。來源與產生陰影以外的畫素在 PNG 輸出中仍保持透明。
圖片會上傳嗎？
不會。檔案解碼、Canvas 繪製、PNG 編碼、預覽與下載建立都在瀏覽器本機執行。

相關工具

圖片工具 使用指南

查看全部