一個在瀏覽器本機執行的圖片疊加替代方案，讓你將第二張圖片放置在底圖之上，同時保持底圖原始像素尺寸，可從五個固定位置中選擇，並調整縮放與不透明度——全程無需上傳任何檔案。Image Overlay 就是這樣的一款工具。它接受一張底圖 JPG、PNG 或 WebP，以及一張疊加圖 JPG、PNG 或 WebP，兩者在磁碟上皆不得超過 25 MiB，解碼後每邊像素上限為 20,000，總像素上限為 40,000,000。位置是五種選擇之一(中央、左上、右上、左下、右下);縮放範圍為疊加圖自身原始尺寸的 10% 至 200%，不透明度範圍為 0% 至 100%。輸出為一張 PNG，其寬度與高度永遠與底圖完全一致。任何步驟都不需要帳號、上傳或伺服器端處理。由於繪製計畫與正式版渲染器所使用的相同，你所看到的預覽與下載的檔案共用同一套像素運算，選擇新位置、縮放或不透明度會撤銷並移除先前結果;只有當你點擊 Create 時才會產生新的 PNG。
「圖片疊加替代方案」真正的含義
搜尋圖片疊加替代方案的人，通常對現有工具有特定的不滿:強制上傳、需要建立帳號、輸出帶浮水印、底圖被暗中縮放，或輸出尺寸難以預期。一個值得考慮的替代方案能解決相同任務——將圖片 B 以選定位置與可視性疊加在圖片 A 之上——但至少改變其中一項取捨。最乾淨的替代方案，是讓每一項取捨都明確可見，而不是藏在「免費」標籤之後。
最重要的取捨包括:檔案去處(伺服器或瀏覽器)、底圖是否被悄悄縮放、輸出格式是否保留透明度、是否能精確定位疊加圖，以及是否需要帳號。任何能針對你的情況勾選正確項目的工具，都是可行的替代方案;接下來各節將說明為何這些項目各自重要，以及 Image Overlay 在實務上如何處理它們。
為何本機、基於瀏覽器的工作流程會改變取捨
基於瀏覽器、無上傳的工作流程，代表你的底圖、疊加圖與最終的 PNG 都不會離開當前分頁。瀏覽器會解碼兩個檔案，使用共用渲染器將它們繪製到 HTML canvas，再將 canvas 匯出為 PNG，並提供檔案下載。當你替換檔案、重新執行，或關閉工具時，暫時性的 ObjectURL 會被撤銷，因此記憶體中不會保留超過當前步驟所需的內容。
這在三個實際面向很重要。第一，你可以使用私人或進行中的圖片，無需將它們送到遠端服務。第二，由於沒有伺服器往返，你在預覽中看到的結果，就是將會下載的相同像素資料——後端沒有任何隱藏的壓縮或縮放步驟。第三，底圖的原始寬度與高度會精準決定輸出 canvas，因此 1600×900 的底圖永遠會產生 1600×900 的 PNG。頁面版面可能會將預覽縮小以符合螢幕，但這些 CSS 尺寸不會影響用於渲染或下載的像素。
若想更詳細地了解相同的無上傳做法，請參考我們關於無需上傳檔案即可將一張圖片疊加在另一張上的指南。
如何使用 Image Overlay 疊加兩張圖片
- 在瀏覽器分頁中開啟 Image Overlay 工具。
- 點擊底圖欄位，從你的裝置選擇一張 JPG、PNG 或 WebP。該檔案磁碟大小不得超過 25 MiB;解碼後，必須符合每邊 20,000 像素及總像素 40,000,000 的限制。
- 點擊疊加圖欄位，選擇第二張 JPG、PNG 或 WebP。相同的大小與尺寸限制會獨立套用於此檔案。
- 選擇位置:中央、左上、右上、左下或右下。每一個都是固定座標，並非可拖曳的控制點。
- 設定疊加圖縮放比例。百分比是套用於疊加圖自身的原始寬度與高度;100% 維持原樣，50% 將兩個尺寸各減半，200% 則將兩個尺寸各加倍。有效範圍為 10% 至 200%。
- 設定疊加圖不透明度。零百分比讓疊加圖完全不可見，但仍會產生與底圖同尺寸的 PNG;百分之百則使用疊加圖本身的 alpha 不變。有效範圍為 0% 至 100%。
- 點擊 Create(或對應的動作按鈕)。工具會清除 canvas，以完整大小與 alpha 1 繪製底圖，套用所選的疊加圖 alpha，於預定座標繪製縮放後的疊加圖，並匯出 PNG。
- 檢視預覽，然後點擊 Download 將 PNG 儲存到你的裝置。
若所選縮放比例下的疊加圖超出底圖邊緣，溢出的像素會被裁切——底圖不會因此調整大小以容納它們。如果你需要那些被裁切的內容可見，請降低縮放比例，或先編輯疊加圖來源。
五個位置及其計算方式
位置控制項恰好有五個值。每個值會對應到相對於底圖左上角的一組確定性 x 與 y 座標。半像素座標會保留為半像素，以便當底圖與疊加圖寬度相差奇數像素時，疊加圖仍能在數學上保持置中。
| 位置 | X 座標 | Y 座標 |
|---|---|---|
| 左上 | 0 | 0 |
| 右上 | baseWidth − overlayWidth | 0 |
| 左下 | 0 | baseHeight − overlayHeight |
| 右下 | baseWidth − overlayWidth | baseHeight − overlayHeight |
| 中央 | (baseWidth − overlayWidth) ÷ 2 | (baseHeight − overlayHeight) ÷ 2 |
以中央位置、底圖 1600×900、縮放後疊加圖 300×150 為例:x = (1600 − 300) ÷ 2 = 1300 ÷ 2 = 650;y = (900 − 150) ÷ 2 = 750 ÷ 2 = 375。這些是像素座標，而非百分比;若你想以百分比推算，請自行依縮放後的疊加圖尺寸計算。
縮放與不透明度，以及它們的交互作用
縮放是明確的，且僅套用於疊加圖。兩個尺寸會乘以相同倍率，因此疊加圖的長寬比在任何設定下都會保持不變。有效範圍為 10% 至 200%;超出此範圍的值不會被接受。這不是自動配合底圖的百分比——50% 的縮放永遠代表疊加圖自身原始尺寸的一半，與底圖寬度無關。
不透明度是繪製底圖後，套用於疊加圖的整體 alpha 乘數。零會讓疊加圖完全透明，但仍會產生與底圖同尺寸的 PNG。百分之百則使用疊加圖既有的 alpha——對於帶透明像素的 PNG，這些像素會維持透明;對於 JPG，則每個像素皆為不透明。中間值會將疊加圖的貢獻乘以該比例，因此 50% 設定的可視程度大約是疊加圖像素在 100% 時的一半。
| 設定 | 範圍 | 在此 50% 的意義 | 在此 100% 的意義 |
|---|---|---|---|
| 縮放 | 10%–200% | 疊加圖以其自身寬度的 0.5 倍與自身高度的 0.5 倍繪製 | 疊加圖以其自身原始寬度與高度繪製 |
| 不透明度 | 0%–100% | 疊加圖貢獻其像素顏色的一半 | 疊加圖貢獻其完整的像素顏色 |
渲染器以固定順序套用縮放與不透明度——清除 canvas、繪製底圖、儲存狀態、設定全域 alpha、繪製縮放後的疊加圖、還原狀態——此順序在正式程式碼與黃金測試中皆相同，因此你所看到的預覽與下載的 PNG，都是由同一繪製計畫所產生。
單一疊加工作流程的常見用途
單一疊加工具能涵蓋設計師與創作者最常遇到的常見情境。角落標誌使用一張小型的、完全不透明的 PNG，放置於左上或右上，縮放為 10%–25%。中央浮水印使用半透明的徽章或文字標誌置中，縮放 30%–60%，不透明度 20%–50%。邊框細節使用位於四個角落之一的角落裝飾，通常為完全不透明。紋理或署名標籤則使用 100% 縮放、覆蓋整張底圖的低不透明度疊加圖，以加入紙張顆粒或署名。
針對這些情境，自由拖曳、旋轉、混合模式與遮色片都是不必要的。一個疊加圖、一個位置、一個縮放、一個不透明度即已足夠——而且底圖應以其原始像素尺寸輸出。
開始前需了解的限制
本工具不提供旋轉、自由拖曳、任意座標、邊距、混合模式、遮色片、背景移除、重複平鋪或多圖層編輯。如果你的工作流程需要其中任何一項，這就是錯誤的工具，而非正確工具的故障版本。
底圖絕不會被縮放。輸出的 PNG 永遠使用底圖的原始寬度與高度。唯一會改變尺寸的是疊加圖，而且僅依你所設定的縮放比例調整。若所選縮放下的疊加圖大於底圖，其位置可能產生負座標，超出底圖 canvas 的部分會被裁切——這是刻意行為，而非隱藏的縮放。
接受 JPEG、PNG 與 WebP。GIF、SVG、AVIF 與其他格式則超出本工具的專注範圍。每個壓縮檔案磁碟大小最多 25 MiB(等於 26,214,400 位元組);解碼後，每張圖片獨立限制為每邊 20,000 像素與總像素 40,000,000。這些解碼後的限制之所以存在，是因為小型壓縮檔案可能會展開成非常大的像素緩衝區，進而耗盡瀏覽器 canvas 記憶體。邊界值會被接受;超過限制一個位元組、一個像素預算增量或一個邊緣像素都會被拒絕，且不產生部分輸出。
重新編碼為 PNG 並不保證保留 EXIF 中繼資料、相機中繼資料、動畫、嵌入文字或原始壓縮。對於精準設計工作，請在你慣用的影像編輯器中以完整大小檢視下載的 PNG，並保留兩份原始檔案，以便隨時重新匯出。
若你在權衡選項，使用本機區塊工具將像素化影像轉為 HD對此有詳細說明。