跳至主要內容
Lizely

圖片疊層

將一張圖片置於另一張圖片的指定位置、縮放比例與不透明度上，且不需上傳任一檔案。

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

使用方式

  1. 1.選擇一個底圖與一個疊圖；每個圖形皆可為 JPG、PNG、WebP，最多至 25、MiB。
  2. 2.選擇中央或角落，然後設定疊圖的縮放比例，並選擇不透明度。
  3. 3.建立完整底圖尺寸的 PNG，檢視預覽結果，並下載成品。

關於圖片疊層

圖片疊層將兩張靜態圖片直接在你的瀏覽器中合併。選擇一個 JPG、PNG 或 WebP 作為底圖，選擇另一張圖片疊放在其上，然後選擇中央或四個角落之一作為位置。調整疊層比例與不透明度，建立組合，檢視預覽，並下載 PNG。原始圖片與產生結果都不會上傳，也不需要帳號或外部處理服務。底圖定義了輸出畫布，其自然寬度與高度會完全保留，因此 1600×900 的底圖會產生 1600×900 的 PNG。這個工具不會靜默地將底圖縮小以適應螢幕或隱藏的匯出限制。預覽會根據頁面佈局視覺限制，但那些 CSS 預覽尺寸不會改變用來渲染或下載的像素尺寸。疊層比例是明確的，僅適用於第二張圖片。一個 100% 的值會讓疊層以自身的自然寬度與高度顯示，50% 會將每個維度縮小一半，200% 則會將每個維度放大一倍。比例範圍為 10% 到 200%。縮放會保留疊層的長寬比，因為兩個維度都使用相同的縮放因子。這不是自動適配底圖的百分比。 若放大後的覆蓋層比基底圖形大，其位置可能會產生負坐標，而超出基底畫布的部分會被裁剪。這是預期的行為，屬於公開的運作方式，而非隱藏的調整。位置有五種確定的選擇。左上角起始點為 x=0 且 y=0。右上角則是以基底圖形寬度減去放大後覆蓋層的寬度。左下角則是以基底圖形高度減去放大後覆蓋層的高度。右下角則同時進行上述兩種減法。中央則是以基底圖形的對應尺寸減去放大後覆蓋層的尺寸，並將每個差值除以二。因此，若差值為奇數，可能會產生半像素坐標，這會讓覆蓋層在數學上保持居中，而非偏向某一側。不透明度範圍為 0% 到 100%。零表示覆蓋層完全透明，但仍會產生基底大小的 PNG。一百則使用覆蓋層本身的 alpha 值不變。中間值則會將覆蓋層的貢獻乘以所選的全球 alpha 值；若 PNG 或 WebP 中原本就為透明的像素，則仍會保持透明。 渲染器首先清除輸出畫布，以 1 的 alpha 值完整尺寸繪製底圖，儲存繪圖狀態，套用所選的 overlay alpha 值，於預定座標繪製縮放後的 overlay，並恢復狀態。生產與隔離測試共用相同的繪圖計畫與渲染函式。黃金測試涵蓋中央與所有四個角落、縮放尺寸、半像素對齊、overlay 大於底圖、零與部分不透明度、底圖輸出尺寸不變，以及 clear/base/save/alpha/overlay/restore 的呼叫順序。兩種輸入皆接受 JPEG、PNG 與 WebP 的 MIME 型別。GIF、SVG、AVIF 與其他格式則超出本專注範疇。每個壓縮檔案最大為 25 的 MiB，等同 26,214,400 位元組。瀏覽器解碼後，每個影象獨立受限於 40,000,000 像素與 20,000 像素。這些解碼限制保護瀏覽器畫布記憶體，因為一個小壓縮檔案可能擴充套件為非常大的像素緩衝區。邊界值被接受；若超出限制，一個位元組、像素預算增量或邊緣像素將被拒絕，且不產生部分輸出。底圖與 overlay 解碼使用獨立的作業產生。 這一點在兩檔案快速選取時尤為重要：載入遮罩層不會無效化進行中的基底解碼，載入基底也不會無效化遮罩層。取代任一檔案僅會撤銷該角色先前的來源 ObjectURL，並無效化任何進行中的輸出。獨特的渲染產生方式可防止延遲 toBlob 回撥從使用較舊檔案、位置、不透明度或縮放比例所產生的結果進行釋出。已掛載狀態的防護機制會防止解碼與輸出回撥更新未掛載的介面。選取檔案會在驗證前清除該角色先前的圖片、舊輸出、錯誤與忙碌狀態。編輯位置、縮放或不透明度也會立即撤銷並移除舊結果。再次執行會在繪圖前撤銷先前的結果 URL。不支援的檔案、空檔案、過大的檔案、無效的解碼尺寸、解碼失敗、無法取得畫布上下文、繪圖異常、PNG 編碼失敗以及下載 URL 失敗會產生明確的可恢復錯誤，並移除過時的輸出。每個隱藏的檔案輸入在選取後會重置其值，因此再次選取相同檔案會觸發新的解碼。 原始物件網址與結果物件網址在被取代或元件解除安裝時會被撤銷。每個結果皆使用 PNG，因其能保留來自底層與疊加圖層的透明度。重新編碼無法保證保留 EXIF 的元資料、相機元資料、動畫、嵌入文字或原始壓縮資訊。JPEG 的輸入圖層沒有透明像素，且當來源圖層皆未貢獻色彩時，透明底層仍會維持透明。若縮放比例不是 100%，則會使用瀏覽器插值，因此縮小或放大疊加圖層可能會使邊緣變柔和。此工具不提供旋轉、自由拖曳、任意座標、邊距、混合模式、遮罩、背景去除、重複平鋪或多層編輯功能。它專為單一預測性的疊加圖層設計，例如標誌、徽章、浮水印圖形、邊框細節、角落標籤或中央紋理。如需精確設計，請在完整尺寸下檢查下載的 PNG，並保留原始檔案。若疊加圖層需要特定的最終像素寬度，請在匯出前根據其自然寬度與所選百分比計算該寬度。若重要內容在所選縮放比例下超出底層，請先降低縮放比例或編輯疊加圖層來源。 整個流程中，所有資料皆保留在目前瀏覽器分頁的本機狀態。

方法與來源

每個輸入都會被驗證為 JPEG、PNG 或 WebP，且不得超過 25 MiB，然後獨立解碼並檢查整數尺寸、20,000 像素邊界最大值以及 40,000,000 像素預算。共用的繪圖計畫會保留基礎寬度和高度。疊加尺寸等於自然尺寸 × 選擇的縮放比例 / 100。中央使用剩餘寬度和高度的一半；角落位置則使用零或基礎減去縮放後的疊加尺寸。不透明度等於所選百分比 / 100。共用的渲染器會清除畫布，以 alpha 1 繪製基礎圖層，儲存狀態，應用疊加 alpha，根據計畫的座標和尺寸繪製，然後恢復。畫布會輸出 image/png。基礎和疊加圖層的解碼作業以及一個渲染作業和掛載的防呆機制會拒絕過期的回呼。所有來源和結果 ObjectURLs 在替換或解除安裝時都會被撤銷。縮放範圍為 10%–200%；不透明度為 0%–100%。範圍除外的靜默基礎圖層調整、自動適配、旋轉、拖曳、混合模式、多個疊加圖層以及後設資料保留。

常見問題

圖片疊層會縮放我的底圖嗎？
不。輸出的寬度和高度始終等於基底圖片的自然尺寸。只有疊加層會改變尺寸，且僅根據你選擇的縮放比例進行調整。
50% 覆蓋層縮放比例是什麼意思？
它會以自身自然寬度和自然高度的一半來繪製覆疊層。這並不代表基礎寬度的 50%。
當覆層比底層大時會發生什麼事？
所選的中心或角落座標仍會套用。任何超出固定底層大小畫布的覆層像素會被裁剪，而不會導致底層重新調整大小。
我的圖片是上傳還是被保留？
不會。這兩個檔案都會在本機進行解碼並合併。當檔案被取代或工具解除安裝時，暫時瀏覽器的 ObjectURL 會被收回。

相關工具

圖片工具 使用指南

查看全部