影像旋轉工具可將數位圖片向左旋轉 90 度、向右旋轉 90 度或旋轉 180 度,讓可見內容朝向正確方向,且不會裁切或拉伸原始像素。這個工作雖然小但很明確:工具接收一個已解碼的點陣圖(也就是 JPG、PNG 或 WebP),並產生一個內容已依您選擇的角度重新定向的新點陣圖。現代的瀏覽器型 影像旋轉工具 完全在目前的分頁中執行這項工作,將來源繪製到一個依選定角度調整大小的輸出畫布上,並匯出一個完整解析度的 PNG。四分之一圈的旋轉會交換寬度與高度,因為旋轉後的矩形比例不同;而半圈的旋轉則保持尺寸不變,因為兩個軸是就地反轉而不交換位置。使用專用旋轉工具而非通用的影像編輯器,重點在於幾何關係是明確的:方向、輸出畫布大小以及最終的檔案大小,在存檔前都一目了然,因此您可以確認實際產生了什麼,而不是相信某個自動選擇。

何時該使用影像旋轉工具
手機相機與掃描軟體並不一定會正確設定方向標記,而檢視檔案的人也可能不會理會該標記。從手機輸出的照片是橫向的,但相機寫入的卻是直向標記,導致每個檢視器都將它讀成歪斜的。掃描的一頁放反了,因為操作者沒有注意到就把紙張面朝下放。設計素材是以橫向匯出的,現在需要符合版面配置中的直向位置。在這些情況下,可見的像素內容就是正確的內容,只是方向不對。裁切不是答案,因為您會失去邊緣;調整大小也不是答案,因為比例已經正確;重新繪製則是大材小用,因為影像已經是點陣圖,只需要轉個方向。
專注的影像旋轉工具正是合適的工具,因為這個操作是幾何性的且可逆。它接收一個與軸對齊的矩形,產生另一個與軸對齊的矩形,內部的像素相同,只是映射到新的方向上。任何更複雜的操作——任意角度的旋轉、透視修正、傾斜校正——都是不同的工作,需要不同的工具。
瀏覽器影像旋轉工具如何運作
當您在瀏覽器中選取檔案時,工具會將位元組包裝在一個暫時的物件 URL 中,以其自然像素尺寸解碼到一個離屏畫布,並檢查結果。如果檔案不是支援的格式、磁碟上超過 25 MB、解碼後超過 4,000 萬像素,或任一邊長超過 20,000 像素,工具會清楚地回報限制並停止,且不會在畫面上留下過時的結果。這些限制存在的原因是壓縮檔案大小無法真正代表旋轉實際所需的記憶體;必須繪製到的是已解碼的畫布。
來源解碼完成後,工具會依角度選擇輸出畫布。向左或向右 90° 的旋轉會交換寬度與高度,因此 1200×800 的來源會變成 800×1200 的畫布。180° 的旋轉則保持相同的畫布,因為兩個軸是就地反轉。接著瀏覽器會在輸出內容上設定一個變換(依據 CanvasRenderingContext2D.setTransform 參考文件),將來源繪製進去,然後將畫布匯出為 PNG。頁面上的預覽只是同一個畫布經 CSS 縮放後的檢視;可下載的檔案就是該畫布本身,且為完整解析度。當您選擇新檔案或新角度時,先前的物件 URL 會被釋放並取代;整個工作流程中,檔案從未傳送到遠端伺服器。
三個步驟旋轉影像
與瀏覽器影像旋轉工具的實際互動很短,這也是為什麼值得將工具保持開啟的部分原因。
- 選擇來源檔案。 開啟影像旋轉工具,從您的裝置選擇一個 JPG、PNG 或 WebP,讓它解碼。在選擇角度前,請確認顯示的像素尺寸;這些數字將是結果建構的依據。
- 選擇角度。 點選向左旋轉 90°、向右旋轉 90° 或旋轉 180°。點擊一發生,輸出畫布就會依該角度調整大小,預覽也會反映這一點。
- 檢查並下載。 詳閱工具回報的旋轉方向、像素尺寸與檔案大小。如果方向看起來正確,且尺寸符合預期,請下載完整解析度的 PNG。如果有任何不妥,切換角度或選擇不同的來源,而不是儲存一個有問題的檔案。
一個好習慣是旋轉一個工作副本,並保留原始檔案直到您驗證結果。工具產生的 PNG 是新編碼的檔案,因此如果您稍後還需要原始的 JPEG、WebP 容器、動畫或詮釋資料,來源檔案仍然安全無虞。
寬度與高度會發生什麼變化
旋轉是一種幾何操作,而這種幾何對畫布有可預測的影響。下表說明了工具所提供的三個預設角度之間的關係。確切的數字取決於來源檔案;選擇角度後,工具會回報它們。
| 來源尺寸 | 角度 | 輸出畫布 | 變更內容 |
|---|---|---|---|
| 1200×800 | 向左旋轉 90° | 800×1200 | 寬度與高度交換;上邊緣移至左側 |
| 1200×800 | 向右旋轉 90° | 800×1200 | 寬度與高度交換;上邊緣移至右側 |
| 1200×800 | 旋轉 180° | 1200×800 | 尺寸不變;對角的兩個端點交換位置 |
規則很簡單:四分之一圈的旋轉會交換寬度與高度,半圈的旋轉則不會。如果結果看起來對您要填入的位置來說太小了,答案通常是調整大小,而不是換個旋轉方向。如果您需要的是鏡像而非旋轉,獨立的翻轉工具可以產生這種結果,且不會產生四分之一圈旋轉的交換效果。
輸出保留什麼、捨棄什麼
工具下載的 PNG 包含瀏覽器解碼後的可視像素。這句話隱藏了幾個值得明確說明的決定。
第一,檔案格式會改變。JPEG 與 WebP 通常是有損格式;PNG 是無損格式。因此,即使新 PNG 的像素尺寸不變或更小,它通常仍會比來源大,因為無損壓縮會保留每個像素更多的資料。這對該容器來說是正常且可預期的,並不代表哪裡出了問題。
第二,容器層級的詮釋資料不會被帶過去。EXIF 欄位、相機方向標記、嵌入的色彩描述檔、GPS 座標、動畫影格以及任何文字區塊都不保證能保留下來。輸出是已渲染像素的靜態 PNG。如果來源包含透明通道,新 PNG 可以保留 alpha;如果來源是不透明的,新 PNG 就會是不透明的。
第三,解析度會以自然像素大小保留下來。1200×800 的來源在四分之一圈旋轉後會變成 800×1200 的 PNG。工具不會調整大小、裁切、拉伸或降取樣。您在頁面上看到的預覽受到 CSS 的視覺限制,但您下載的檔案是完整的輸出畫布。
為相鄰任務挑選合適的工具
影像旋轉工具把一件事做好,且對它所做的事情誠實。當任務超出旋轉範圍時,合適的工具也會跟著改變。如果方向正確但尺寸需要改變,影像調整大小工具 可以明確產生目標像素大小。如果您需要不同的容器——例如必須從 PNG 變成 JPG,或從 WebP 變成 PNG——專用的轉檔工具是較安全的選擇,因為它會處理壓縮設定,而不是讓它們處於隱含狀態。如果您懷疑真正的問題其實是相機方向標記,EXIF 檢視器 可讓您在決定旋轉像素之前,先檢查來源所聲稱的內容。
原則與旋轉工具本身遵循的相同:挑選剛好執行您所需操作的工具,確認它所回報的輸出,並在您打算使用的位置驗證結果。歪斜的照片在 90° 旋轉讓它們正面朝上那一刻就不再歪斜了;其餘的工作流程也應該保持同樣直接。
如需更深入的瞭解,請參閱 免註冊的影像轉 ASCII:在本地轉換檔案。
如需更深入的瞭解,請參閱 在瀏覽器中本地執行的 JPG 轉 PNG 替代方案。