影像疊加瀏覽器工具，會把兩張影像合成成一張 PNG：在五個固定位置中選一個，把選定的疊加圖繪製在底圖上方，並套用明確的縮放百分比與不透明度數值，整個過程都在你的瀏覽器本機完成，兩份來源檔案都不會被上傳到伺服器。
《城市：天際線》的玩家經常需要把兩張影像合成一張。常見的使用情境很好理解：在分享城市截圖之前，先貼上一個透明的頻道標誌或浮水印；為了做教學，把一張高度圖參考疊在遊戲內的地圖畫面上；用一個角落徽章來標記縮圖；或為了模組製作指南，把一份 UI 模擬稿預覽在一張基礎地形截圖上。在每一種情況下，底層的任務都一樣：把一張圖片放在另一張圖片上方的特定位置，用特定的縮放與透明度。《城市：天際線》這款遊戲本身，並沒有內建截圖用的影像疊加編輯器，而大多數重量級的相片應用程式，不是要求你把檔案上傳到遠端伺服器，就是要你先學會一套多層工作流程，才能把兩張圖疊在一起。影像疊加工具正好補上了這個空缺，它提供一套聚焦、可預期的工作流程，完全在你的瀏覽器分頁內執行，讓你能產生一份合成後的 PNG，而完全不必把你城市的截圖傳送給任何第三方服務。
為什麼《城市：天際線》玩家會需要一個影像疊加工具
《城市：天際線》是一款沙盒城市建設遊戲，而 YouTube、Reddit、Discord，與模組論壇上圍繞著它的大量內容，都仰賴合成影像。一個常見的需求，是在發布之前，先在城市截圖上疊一個透明的頻道標誌或浮水印，因為原始截圖本身，通常不帶任何識別標記。另一個常見的任務，是為了教學或社群指南，把一張規劃圖、高度圖參考，或分區規劃圖，疊在一張遊戲內截圖上。模組製作者，有時會把一張疊加影像（自訂資產的剪影、一份 UI 模擬稿、一個建築物的地基輪廓）預覽在一張基礎地形截圖上，藉此比較版面配置，而不必打開一整套完整的設計程式。在所有這些情況下，工作流程都能歸結成：選一張底圖、選一張疊加圖、選一個位置、決定這個疊加圖該多大、決定它該有多透明，然後匯出一張 PNG。
一個以瀏覽器為基礎的影像疊加工具，特別適合這套工作流程，因為《城市：天際線》的截圖，本來就已經以 JPG 或 PNG 的格式存在你的電腦上。你不需要把一張好幾百萬位元組大的城市截圖傳到雲端編輯器、等一個下載連結，或去讀一份針對業餘遊戲截圖的隱私權政策。影像疊加工具會完整保留底圖的原始解析度，這對清晰的縮圖與高 DPI 螢幕來說很重要，而且它提供五個固定位置，而不是一個靠肉眼對齊、容易出錯的自由拖曳工具。因為輸出結果永遠符合底圖確切的寬與高，產生出來的 PNG，能直接套進與你原始截圖相同的縮圖欄位，或社群媒體版面配置中。
影像疊加工具實際上做了什麼
影像疊加工具接受兩張靜態影像——一張底圖與一張疊加圖——並產生一張包含兩者的 PNG。底圖決定了輸出畫布的大小，所以一張 1920x1080 的《城市：天際線》截圖，會產生一張 1920x1080 的 PNG，不會有任何隱藏的尺寸調整、不會自動配合螢幕，也不會因為輸出限制而被悄悄裁切。疊加圖會被繪製在底圖上方五個位置中的一個：左上、右上、左下、右下，或置中。這個位置是用數學方式精確計算出來的，不是靠肉眼估的，所以角落位置能與底圖邊緣完全對齊，而置中位置，即使在尺寸為奇數時，也依然維持在數學上的正中央。
你能控制疊加圖的兩件事：它的縮放比例（以它自身原始尺寸的百分比表示），以及它的不透明度（以百分比表示）。縮放比例可以從 10% 一路調到 200%，涵蓋從一個小小的角落徽章，到一個放大到原尺寸兩倍的疊加圖之間的所有情況。不透明度可以從 0%（完全透明，但仍然會被算繪）調到 100%（維持疊加圖自身的 Alpha 值不變）。每一次的輸出結果，都是一張 PNG——這個格式，能在兩張影像都沒有貢獻顏色的地方，保留透明度。在底層，這個算繪器會先清空畫布，以 Alpha 值 1 全尺寸繪製底圖，儲存繪圖狀態，套用選定的疊加圖 Alpha 值，在計算好的座標上繪製縮放後的疊加圖，再還原狀態，這與MDN 的 drawImage 參考文件所記載的行為一致。
把第二張影像疊加到你的截圖上
當你想把一張《城市：天際線》截圖，跟一張像是標誌、浮水印、徽章，或參考疊加圖這樣的第二張影像合併時，請照著以下確切的流程操作。
- 選擇底圖。這是你的《城市：天際線》截圖、地圖畫面，或地形截圖。它必須是 JPG、PNG，或 WebP 檔案，大小不超過 25 MiB（26,214,400 位元組），邊長不超過 20,000 像素，且經瀏覽器解碼後，總像素預算不超過 40,000,000 像素。
- 選擇疊加圖。這是你想放在上方的標誌、浮水印圖案、徽章，或參考影像。同樣的格式與尺寸規則也適用，每一份輸入都會被獨立檢查。
- 選擇一個位置。可以選擇置中、左上、右上、左下，或右下。左上會讓疊加圖從 x=0、y=0 開始。右上會用底圖寬度減去縮放後的疊加圖寬度。左下會用底圖高度減去縮放後的疊加圖高度。右下則兩者都做。置中則是用對應的底圖尺寸，減去縮放後的尺寸，再把每個差值除以二。
- 設定疊加圖的縮放比例。輸入一個介於 10% 到 200% 之間的百分比。數值 100% 會以疊加圖自身原始的寬與高繪製。50% 會讓每個維度都變成一半。200% 則會讓每個維度都加倍。因為兩個維度使用的是同一個倍率，疊加圖的長寬比會被保留下來。
- 設定不透明度。輸入一個介於 0% 到 100% 之間的百分比。零會讓疊加圖完全透明，但仍然會產生一張與底圖同尺寸的 PNG。一百則會維持疊加圖自身的 Alpha 值不變。中間的數值，會把疊加圖的貢獻乘上那個全域 Alpha 值，而任何原本就存在於 PNG 或 WebP 中的透明像素，仍然會保持透明。
- 建立合成結果。按一下動作按鈕，建立這張 PNG。這個工具會清空畫布，全尺寸繪製底圖，儲存繪圖狀態，套用選定的疊加圖 Alpha 值，在計算好的座標上繪製縮放後的疊加圖，再還原狀態。
- 檢視預覽，下載 PNG。頁面上的預覽，是為了配合頁面版面而調整過大小的，但實際下載下來的檔案，永遠使用底圖原始的寬與高。請儲存這張 PNG，並以完整尺寸檢查它，確認對齊是否正確。
如果你想做出變更——更換檔案、改變位置、改變縮放比例，或改變不透明度——只要你選取一個新檔案，或編輯任何一個控制項，先前的結果就會立刻失效，所以你絕不會不小心下載到一份過時的 PNG。
理解位置、縮放，與不透明度
位置的選擇是確定性的，這讓你在點擊之前，就能規劃好結果。下表顯示了一張 1920x1080 底圖，搭配一張以 100% 縮放比例呈現的 400x100 疊加圖時，所計算出來的座標。這些數值，正是算繪器在繪製疊加圖時實際使用的數值。
| 位置 | 計算出的 x | 計算出的 y | 備註 |
|---|---|---|---|
| 左上 | 0 | 0 | 疊加圖緊貼左上角。 |
| 右上 | 1920 - 400 = 1520 | 0 | 疊加圖緊貼右上角。 |
| 左下 | 0 | 1080 - 100 = 980 | 疊加圖緊貼左下角。 |
| 右下 | 1520 | 980 | 疊加圖緊貼右下角。 |
| 置中 | (1920 - 400) / 2 = 760 | (1080 - 100) / 2 = 490 | 數學上精確置中，允許半像素的偏移。 |
如果在選定的縮放比例下，你的疊加圖在任一維度上比底圖還大，計算出來的座標可能變成負值，或超出底圖寬度，而算繪器會在底圖畫布的邊界處裁切疊加圖，而不是把底圖放大以配合它。這是刻意設計的行為，不是隱藏的尺寸調整。如果重要的內容因此落在底圖範圍之外，請先調低縮放比例，或先裁切疊加圖來源。
檔案限制、格式，與輸出細節
《城市：天際線》的截圖，尤其是在 4K 解析度下，可能相當大，所以值得確切了解這個工具接受什麼樣的輸入。兩份輸入都必須是 JPG、PNG，或 WebP。GIF、SVG、AVIF，與其他格式都不在支援範圍內。每一份壓縮過的檔案，最大可以到 25 MiB。瀏覽器解碼這張影像之後，這個工具會各自獨立檢查，確認兩個邊長都沒有超過 20,000 像素，而且總像素數維持在 40,000,000 像素以內。這些解碼後的限制，是為了保護瀏覽器畫布的記憶體，因為一個很小的壓縮檔案，解碼後可能展開成一個非常龐大的像素緩衝區。
| 限制 | 邊界值 | 在邊界值上的行為 |
|---|---|---|
| 接受的 MIME 類型 | image/jpeg、image/png、image/webp | 其他格式會被拒絕，並顯示明確的錯誤訊息。 |
| 壓縮檔案大小 | 25 MiB（26,214,400 位元組） | 等於這個上限會被接受；多一個位元組就會被拒絕。 |
| 解碼後的邊長 | 每邊 20,000 像素 | 等於這個數值會被接受；多一個像素就會被拒絕。 |
| 解碼後的像素預算 | 每張影像 40,000,000 像素 | 等於這個數值會被接受；多一個像素就會被拒絕。 |
| 疊加圖縮放比例 | 10% 到 200% | 範圍的兩端都會被接受。 |
| 疊加圖不透明度 | 0% 到 100% | 範圍的兩端都會被接受。 |
| 輸出格式 | PNG | 在兩份來源都沒有貢獻顏色的地方，透明度會被保留下來。 |
輸出的 PNG，使用底圖確切的寬與高，這對《城市：天際線》的截圖來說很重要，因為你會希望結果能套進與原始截圖相同的縮圖欄位，或社群媒體版面配置中。EXIF 中繼資料、相機欄位、動畫，以及原始壓縮方式，都不保證能在重新編碼後存活下來。JPEG 輸入沒有透明度，所以輸出結果中的透明區域，只會來自底圖或疊加圖的 PNG/WebP 檔案。當縮放比例不是 100% 時，會使用瀏覽器內建的內插演算法，所以一個大幅縮小或放大的疊加圖，邊緣可能會稍微變柔和——如果像素級的精確邊緣對你很重要，請以完整尺寸檢視下載下來的 PNG。
實例演練：為一張城市截圖加上浮水印
假設你有一張 1920x1080 的《城市：天際線》截圖（底圖），以及一張 600x120 的透明 PNG 標誌（疊加圖），你想以一半的不透明度，把它放進右下角。以下逐步說明這些數字是怎麼算出來的。
你選擇右下。在縮放比例為 100%、底圖為 1920x1080 的情況下，疊加圖計算出的座標是 x = 1920 - 600 = 1320，y = 1080 - 120 = 960。算繪器會在 (1320, 960) 這個位置繪製疊加圖，恰好緊貼底圖的右下角。
如果你覺得這個標誌太大，把縮放比例改成 50%，兩個疊加圖維度都會減半，因為這個工具會把同一個倍率同時套用到寬與高上。新計算出的尺寸是寬 600 x 50 / 100 = 300 像素，高 120 x 50 / 100 = 60 像素。新計算出的座標變成 x = 1920 - 300 = 1620，y = 1080 - 60 = 1020。這個標誌現在變成右下角一個小徽章，而它 5:1 的長寬比，也依然以 300:60 的比例保留了下來。
把不透明度設成 50%。算繪器會把疊加圖的 Alpha 貢獻，全域乘上 0.5，所以這個標誌會透過城市截圖隱約可見，但背後的建築物依然清晰可辨。PNG 標誌裡原本就存在的透明像素，仍然會保持透明，這讓周圍的天空或地形保持清晰。建立合成結果，下載這張 PNG，你就得到了一張 1920x1080 的 PNG，帶有一個小小的半透明浮水印，可以直接用於 YouTube、Reddit，或 Discord。
如果你之後決定，這個浮水印應該改放在右上而不是右下，只要選擇「右上」就行。算繪器會重新計算座標：x = 1920 - 300 = 1620，y = 0。同一個縮放後的 300x60 標誌，現在會緊貼右上角。你不需要重新編輯疊加圖檔案。
這個工具沒有提供的功能
影像疊加工具刻意限定在單一、可預期的疊加行為上，這也是為什麼上面的數學運算能保持這麼簡單。它不包含旋轉、自由拖曳、任意 x/y 座標、疊加圖周圍的邊界或內距、混合模式（色彩增值、濾色、覆蓋等等）、遮罩、去背、重複平鋪，或多層編輯。永遠只有一張疊加圖疊在一張底圖上，繪製在五個位置中的一個。
對於大多數《城市：天際線》的截圖任務來說——一個角落標誌、一個頻道浮水印、一個小型參考徽章、一個置中的縮圖標籤，或單一一層透明貼圖——這個範圍已經夠用。如果你需要不同的角度、一個非矩形的遮罩，或好幾層疊加圖疊在一起，請先編輯疊加圖來源，或改用一套完整的設計工具。影像疊加工具的定位，就是要成為處理簡單情境時，那個可預期、完全留在你瀏覽器本機的步驟。
你可以在同一套工作流程中，把這個疊加工具跟其他瀏覽器工具搭配使用。匯出合成後的 PNG 之後，你可以裁切它、調整它的大小、加上邊框，或把它轉成 JPG 以縮小附件檔案大小，全程都不需要上傳任何內容。要在上傳到論壇之前壓縮最終的 PNG，一個專門的影像壓縮工具，能在保留你剛匯出的尺寸的同時，縮小檔案大小。
第一次就做出乾淨結果的技巧
幾個習慣，能幫助你的《城市：天際線》截圖，在第一次嘗試時就呈現乾淨的結果。
第一，把疊加圖先準備成透明的 PNG 或 WebP，讓標誌以外的部分本來就是透空的。這個工具會尊重疊加圖裡的透明像素，這能讓城市截圖在標誌實際所在的位置以外，處處保持可見。
第二，在匯出之前，先算出縮放後的疊加圖尺寸。公式是：縮放後寬度 = 疊加圖原始寬度 x 縮放比例 / 100。以一個寬 600 像素的標誌、50% 縮放比例來說，縮放後的寬度是 300 像素。如果那正是你想要在最終影像中呈現的確切寬度，你其實已經先幫這個工具算好了它自己會算的數學。
第三，請以完整尺寸檢查下載下來的 PNG，而不是頁面預覽的尺寸。這個預覽是為了配合頁面版面而調整過大小的，並不會改變實際用於算繪或下載的像素尺寸。一張 1920x1080 的底圖，即使頁面上的預覽看起來像一張 600 像素的縮圖，仍然會產生一張 1920x1080 的 PNG。
第四，留意限制。一張 4K 的《城市：天際線》截圖，遠遠落在 20,000 像素邊長上限與 40,000,000 像素預算之內，但一張 8K 的模組截圖，可能會接近這些限制。如果超出邊界，請先調整截圖大小，再照常做疊加。
最後，請保留兩份原始檔案。PNG 匯出不保證會保留 EXIF 中繼資料、動畫，或原始壓縮方式，所以如果你之後需要修改疊加圖，你可以針對同一個底圖檔案，重新執行同樣的步驟。
要快速上手，請打開影像疊加工具，選擇你的《城市：天際線》截圖作為底圖，選擇你的標誌或參考影像作為疊加圖，選一個位置，設定縮放比例，設定不透明度，然後下載 PNG。整個流程中，一切都會留在你目前的瀏覽器分頁裡。
如果你正在權衡選項，《城市：天際線 2》：在本機建立一張參考疊加 PNG對此有詳細說明。