若要將一張圖片疊加在另一張圖片上，請在一張全尺寸的底圖上方，以選擇的位置、縮放比例和透明度放置第二張圖片，然後將結果匯出為單一 PNG 檔案。一個基於瀏覽器的圖片疊加工具可以在不上傳任何檔案的情況下完成這項工作：你挑選一張 JPG、PNG 或 WebP 作為底圖，挑選第二張圖片疊加在它上方，選擇置中或四個角落的其中一個位置，調整疊加圖的縮放（自身原始大小的 10% 到 200%）和透明度（0% 到 100%），然後下載一個像素尺寸與底圖完全相同的 PNG。底圖絕不會被調整大小，疊加圖只會依照你選擇的百分比進行縮放，任何超出底圖畫布的像素都會被刻意裁切，而不會觸發隱藏的尺寸調整。因為這兩個檔案都是透過標準的canvas drawImage 流程在當前分頁中直接解碼，所以合成步驟既快速又私密，並且對於相同的輸入每次都能產生相同的輸出。
底圖、疊加圖與結果
疊加兩張圖片的意思是將一張圖片堆疊在另一張圖片之上，使兩者在單一輸出中都能保持可見。下方的圖片（底圖）決定畫布大小，而上方的圖片（疊加圖）則以選擇的位置、尺寸和透明度放置。常見的實際應用包括在產品照片的角落加入小標誌、在分享圖片前為圖片加上浮水印、將徽章或緞帶疊加在肖像上，或是在平鋪拍攝的畫面中央加上裝飾性的框邊細節。
底圖不會被裁剪、填補或縮放以符合任何東西：你為底圖選擇的內容就決定了最終結果的像素大小。只有疊加圖可以改變大小，而且只能依照你選擇的縮放百分比進行。這種單一疊加的模型（一張底圖加上一張具有固定位置的疊加圖）正是瀏覽器工具得以勝任此工作的關鍵。它可以事先明確標示出輸出尺寸，並避免一般用途編輯器中常造成問題的隱藏式尺寸調整——在那類工具中，「符合畫布」的開關可能會悄悄把你的照片縮成 95%，讓你不禁納悶為什麼匯出結果與版面配置不再一致。
支援的檔案類型、大小與解碼限制
底圖和疊加圖都必須是瀏覽器能透過標準影像管線解碼的格式。此工具接受三種格式，其他格式則會以可復原的錯誤予以拒絕。
| 格式 | 是否接受？ | 在結果中的行為 |
|---|---|---|
| JPG / JPEG | 是 | 直接解碼；沒有需要保留的透明像素 |
| PNG | 是 | 既有的透明像素在結果中保持透明 |
| WebP | 是 | 直接解碼；如果存在透明度則予以保留 |
| GIF、SVG、AVIF 及其他 | 否 | 超出本工具的專注範圍 |
每個檔案在解碼前最多只能為 25 MiB（26,214,400 位元組）。在瀏覽器解碼檔案之後，每張影像會被獨立限制為 40,000,000 個總像素，且任一邊最多 20,000 像素。這些解碼限制是為了保護 canvas 記憶體，因為一個小的壓縮檔案可能會展開成非常大的像素緩衝區。邊界值會被接受；只要超過限制一個位元組、一個像素或一條邊的像素，就會被拒絕，不會產生部分輸出。底圖與疊加圖會分開驗證，因此將一張小底圖搭配一張巨大的疊加圖（或相反的情形）會在對應的步驟被抓出來，而不是在合成後期才失敗。
如何將一張圖片疊加在另一張圖片上
完整的工作流程會在當前分頁中執行，並產生一張你可以儲存並在任何地方使用的 PNG。整個過程分為三個階段：挑選兩個檔案、設定疊加圖，以及產生結果。
- 在瀏覽器中開啟圖片疊加工具。不需要帳號、登入或外部服務。
- 選擇一張底圖和一張疊加圖。兩者皆可為 JPG、PNG 或 WebP，上限為 25 MiB。為任一角色選擇新檔案時，會清除該角色的前一個檔案、任何先前的結果，以及任何錯誤或忙碌狀態。
- 為疊加圖選擇位置：左上、右上、左下、右下或置中。此位置具有確定性，每次使用相同輸入重新渲染時都會保持一致。
- 設定疊加圖的縮放比例。縮放會套用於疊加圖自身的原始寬度和高度；100% 會以其原生大小繪製，50% 會將每個維度縮為一半，200% 則會將每個維度加倍。範圍為 10% 到 200%。
- 將疊加圖的不透明度設定為 0% 到 100% 之間。設為 0% 會讓疊加圖完全透明，但仍會產生一張與底圖同尺寸的 PNG；100% 則會保留疊加圖自身的 alpha 通道不變。
- 產生結果。canvas 會清除後以完全不透明（alpha 為 1）的狀態繪製底圖，儲存繪圖狀態，套用所選的疊加圖 alpha，在規劃好的座標繪製縮放後的疊加圖，然後還原狀態。
- 檢視預覽並下載 PNG。預覽圖會調整為符合頁面版面的大小，但下載的檔案會完全採用底圖的原始像素尺寸，因此一張 1600x900 的底圖會產生 1600x900 的 PNG。
位置、縮放與不透明度說明
五個位置選項各自對應一組固定的左上角座標。縮放後疊加圖的寬度和高度等於其原始寬度和高度乘上所選的縮放比例再除以 100。下表顯示每個位置的座標；base_w 和 base_h 是底圖的原始寬度和高度，ov_w 和 ov_h 則是縮放後疊加圖的尺寸。
| 位置 | 左上角 x | 左上角 y |
|---|---|---|
| 左上 | 0 | 0 |
| 右上 | base_w - ov_w | 0 |
| 左下 | 0 | base_h - ov_h |
| 右下 | base_w - ov_w | base_h - ov_h |
| 置中 | (base_w - ov_w) / 2 | (base_h - ov_h) / 2 |
以下是一個單一的完整範例。取一張 1600 x 900 的底圖和一張 400 x 400 的疊加圖，縮放比例為 50%。縮放後的疊加圖變為 200 x 200。若放在右上角，座標為 x = 1600 - 200 = 1400，y = 0。若放在置中，座標為 x = (1600 - 200) / 2 = 700，y = (900 - 200) / 2 = 350。當底圖和疊加圖尺寸不同時，置中可能會產生半像素的座標；渲染器會讓疊加圖在數學上保持置中，而不會傾向於其中一側。
縮放會以相同的比例套用於兩個維度，因此疊加圖的長寬比在任何百分比下都會被保留。50% 並非底圖寬度的 50%，而是疊加圖自身原始寬度的一半和自身原始高度的一半。不透明度會將疊加圖的貢獻乘上所選的百分比：0% 為完全透明，100% 會保留疊加圖自身的 alpha 通道，介於兩者之間的數值則會進行混合。PNG 或 WebP 疊加圖中原本就存在的透明像素，在結果中仍會保持透明。
輸出 PNG 保留了什麼、捨棄了什麼
下載的檔案一律為 PNG，因為 PNG 是唯一能廣泛支援同時保留底圖與疊加圖透明度的格式。重新編碼並不保證會保留任一來源的 EXIF 中繼資料、相機中繼資料、動畫、嵌入文字或原始壓縮設定。輸出結果是透過 drawImage 寫入，並透過標準的 canvas toBlob 路徑匯出的全新像素加 alpha 畫布。如果底圖是一張沒有透明度的 JPEG，那麼輸出結果中的透明區域就是疊加圖本身為透明的部分。
因為瀏覽器會在疊加圖縮放比例不是 100% 時進行重採樣，所以縮小或放大疊加圖可能會讓邊緣看起來比原始影像柔和。渲染器使用標準的 canvas 插值，並沒有額外的銳化步驟。為了精準起見，請在外部檢視器中以全尺寸檢視下載的 PNG 後再發布。每次的結果都會以新建立的本地物件網址形式交付，並在你替換任一輸入或重新執行合成時被撤銷，因此陳舊的預覽不會洩漏到後續的匯出中。
當疊加圖大於底圖時
如果縮放後的疊加圖在單邊或雙邊上大於底圖，所選的位置仍然會生效。疊加圖的左上角會被放置在計算出來的座標，任何落在底圖畫布之外的疊加圖像素都會直接被裁切；這不會導致底圖被調整大小、不會擴展畫布，也不會產生第二張圖片。將一張 1500 x 1500 的疊加圖放在 1000 x 800 底圖的左上角時，只會顯示左上角 1000 x 800 的區域，其餘的疊加圖會被捨棄。如果重要的內容在所選的縮放比例下超出了底圖，務實的解決方法是降低縮放比例，或編輯疊加圖來源，讓可見的部分包含你真正想顯示的內容。這種裁切是已被記錄在案且刻意的行為，而非隱藏的尺寸調整。
圖片疊加工具的適用情境
疊加工具是處理單一、可預期之合成工作的正解：標誌、浮水印圖案、角落徽章、置中的紋理，或小型裝飾性框邊。它不是多層式編輯器，也不提供旋轉、自由拖曳、任意座標、混合模式、遮罩、背景移除或重複拼接等功能。如果疊加圖要做成圓形，可以先參考瀏覽器圓形裁切指南來處理來源，產生的透明 PNG 可以直接放入疊加圖欄位。如果需要置中的標題或註解，可以在疊加前先做一個文字浮水印步驟，產生一個平面檔案，再由這個工具為你定位和淡入淡出處理。結果就是一張擁有底圖精準像素尺寸的單一 PNG，可以直接分享、上傳，或餵給其他工具使用。
如果你正在權衡各種選項，如何在天際城中運用圖片疊加對此有詳細的說明。