=

旋轉影像是一種座標變換,它會將每個像素繞著選定的角度旋轉,並重新計算輸出畫布,讓整張圖片仍然完整顯示。在 90 度旋轉時,來源寬度會變成輸出高度,來源高度會變成輸出寬度;在 180 度旋轉時,兩個軸會反轉但不會交換位置,因此 1200×800 的影像旋轉後仍是 1200×800。旋轉純粹是幾何操作:像素尺寸會保留或交換,但每個彩色點的實際 RGB 數值保持不變——只有它們的位置改變。由於幾何關係是確定性的,瀏覽器可以用單一仿射矩陣套用,將來源以原始像素大小繪製到預先規劃好的輸出畫布,然後匯出完整解析度的 PNG,不需要重新編碼或重採樣圖片。這種區隔——可預測的輸出尺寸、無重採樣、無縮放——正是讓本機旋轉結果值得保留或上傳到他處的原因。

「rotate image explained」這個詞組通常出現在照片、掃描檔或設計匯出檔案側向或上下顛倒時,使用者想確切知道修正它會對檔案造成什麼影響。它會縮小嗎?會失去畫質嗎?能上傳到任何地方嗎?在每個行為良好的實作中答案都相同:旋轉是幾何操作,不是濾鏡,所以圖片會以原始像素大小保留,唯一改變的是每個像素的位置。其他所有事項——檔案大小、色彩深度、透明度、像素數量——都是新畫布編碼方式的副作用,而不是旋轉本身的副作用。

rotate image explained
旋轉影像說明:如何改變尺寸

旋轉如何改變寬度和高度

有兩件事決定旋轉影像的輸出尺寸:角度和來源的形狀。四分之一圈(向左 90° 和向右 90°)會交換兩邊,因為頂邊必須落在原本側邊的位置。半圈(180°)會將對角對應到彼此,因此邊界框與來源相同。傾斜的旋轉——例如 30° 或 45°——會產生較大的邊界框,因為角落會擺動到原始矩形外,任何乾淨的實作都必須重新計算畫布以容納傾斜的影像。Image Rotator 刻意只提供三個確定性的情況(向左 90°、向右 90°、180°),因為每一個都是乾淨的整數比例,不需要放大畫布或產生空白角落。

來源尺寸向左或向右 90°180°
1200×800(橫向)800×1200(直向)1200×800(不變)
800×1200(直向)1200×800(橫向)800×1200(不變)
1500×1500(正方形)1500×1500(不變)1500×1500(不變)

正方形的情況是個實用的健全性檢查:1500×1500 的影像以任何 90° 的倍數旋轉後,兩個方向的尺寸都相同,因為沒有較長邊和較短邊可以交換。產品說明文件直接說明這條規則:四分之一圈會交換寬度和高度,因此 1200×800 的影像向左或向右旋轉後變成 800×1200,而 180 度旋轉保留 1200×800 的尺寸,因為兩個軸反轉但不交換位置。同一條規則也是頁面上的結果面板在每次點擊後顯示的內容,所以你不必自己預測新尺寸。

如何在本機旋轉影像

  1. 在瀏覽器中開啟 Image Rotator,並選擇 JPG、PNG 或 WebP 檔案。工具會從你的裝置讀取檔案,並在你選擇角度之前回報原始像素尺寸。
  2. 選擇三個旋轉按鈕之一:向左 90°、向右 90° 或 180°。每個選項對應一個單一、確定性的仿射變換,瀏覽器透過 CanvasRenderingContext2D.setTransform 套用,這在 MDN setTransform 參考文件中有記載。
  3. 檢查結果面板。它會顯示選擇的角度、新寬度和高度,以及畫布匯出產生的 PNG 檔案大小。
  4. 如果尺寸看起來正確,點擊下載以儲存完整解析度的 PNG。下載檔案是由完整的輸出畫布產生,而非縮小的 CSS 預覽,所以你縮小看到的內容,就是你以完整大小儲存的內容。
  5. 如果需要不同的角度,請選擇新檔案或點擊另一個旋轉按鈕。工具會釋放先前的物件 URL 並替換結果,所以頁面上不會留有殘留的影像。

由於每個步驟都在當前分頁中發生,瀏覽器唯一寫入的檔案是你選擇下載的 PNG。選定的影像以臨時物件 URL 表示,時間僅夠解碼圖片;該 URL 會在工作完成或選擇新檔案時釋放。PNG 會獲得自己的短暫下載 URL,下次旋轉、更換檔案或關閉頁面時會被取代並撤銷。

瀏覽器實際對像素做了什麼

旋轉在影像編輯中很特別,因為它完全由一個 2×3 仿射矩陣描述。來源圖片解碼一次為點陣圖,繪製到一個寬度和高度已為選定角度預先計算好的畫布,然後透過 HTMLCanvasElement.toBlob 將畫布匯出為 PNG,這在 MDN toBlob 參考文件中有記載。瀏覽器解碼來源、建立具有正確輸出尺寸的畫布、套用選定的座標變換,然後產生 PNG 下載。這條管線中沒有任何步驟會重新縮放圖片、引入平滑處理或改變色彩——原本在來源中座標 (x, y) 的相同 RGB 數值,僅僅被繪製到矩陣指定的新座標上。

對於順時針 90° 旋轉,來源頂邊會對應到輸出的右邊,因此原本靠近左上角的像素會出現在畫布的右上角附近。逆時針旋轉會將頂邊對應到左邊,180° 旋轉則將對角對應到彼此。渲染器和獨立的測試套件都讀取相同的旋轉計畫,這就是為什麼任何非正方形影像的四角對應都會根據固定參考進行斷言:平移錯誤、裁切一條邊、或繞著錯誤的原點旋轉,測試會在上線前失敗。

支援的輸入和明確的限制

由於瀏覽器在繪製前會先解碼檔案,因此限制會在兩個階段檢查:磁碟上的壓縮檔案和記憶體中的解碼後點陣圖。兩者都會顯示,都不是靜默上限。

限制條件上限檢查原因
接受的容器格式JPEG、PNG、WebPSVG 被排除,因為它可能參照外部內容,且不是純粹的解碼後點陣圖。
壓縮檔案大小25 MB防止大型、緩慢的解碼凍結分頁。
解碼後像素數40 megapixels壓縮位元組無法預測畫布記憶體,所以解碼後的影像會單獨檢查。
單邊尺寸20,000 像素捕捉非常長的橫幅或全景圖,這類影像的畫布會超過瀏覽器記憶體。

如果這些檢查中有任何一個失敗,頁面會產生明確的訊息,並清除先前的結果,而不是像旋轉成功一樣留在畫面上。這就是明確限制與靜默上限的差別:30 MB 的檔案、25,000 像素的橫幅或 60 megapixel 的照片會被拒絕並說明原因,而不是被接受、在背景中縮小,然後匯出為比來源更小的 PNG。

旋轉不會保留的內容

由於輸出是由解碼後的可視像素全新編碼的 PNG,原始檔案的某些屬性不會被保留。EXIF 標籤、相機方向旗標、色彩設定檔、動畫影格和嵌入的文字欄位都不保證能在旋轉後存活。合約直接說明這一點:旋轉不保證保留原始檔案容器、EXIF 中繼資料、相機方向標記、色彩設定檔、動畫或嵌入的文字欄位。如果你需要在旋轉前檢查中繼資料,本機 EXIF 檢視器是正確的下一步;如果你需要在旋轉後移除中繼資料,對原始檔案套用 EXIF 移除工具可以在不遺失像素的情況下達成。

下載的 PNG 比你一開始的 JPEG 或 WebP 大,即使像素尺寸相同,這也是正常的。PNG 是無損容器,而 JPEG 和許多 WebP 編碼是有損的。旋轉後,圖片是從未壓縮的畫布像素重建的,這些像素的無損編碼通常比有損來源大。這是容器的特性,而不是旋轉添加或銳化細節的跡象。

什麼時候旋轉是正確的工具(什麼時候不是)

當圖片尺寸正確、長寬比正確、方向也正確——只有一個軸例外時,旋轉是正確的工具。側向的手機照片、上下顛倒的掃描器頁面、需要從橫向切換到直向的標誌,或必須指向特定方向的縮圖,這些情況下純粹的幾何操作就足夠了。Image Rotator 一次點擊就能處理這三種情況,在儲存前回報結果尺寸,並且永遠不會觸碰圖片的其餘部分。

當圖片方向正確但形狀錯誤時,旋轉就是錯誤的工具。如果你需要主體朝向另一個方向,而不是頂邊指向別處,你需要的其實是鏡像功能,而 Image Flipper 就是為此設計的。如果圖片方向正確但需要特定的寬度和高度,調整大小操作屬於另一個工具,因為單純旋轉不會拉伸、裁切或縮小。產品合約清楚地說明了這種分工:Image Rotator 刻意只把一項操作做好,並讓其輸出行為可見,而不是把不相關的編輯藏在自動選擇背後。

若要獲得可靠的結果,與任何其他影像編輯一樣,適用相同的建議:保留原始檔案、旋轉工作複本,並在你打算使用的應用程式中開啟下載的 PNG。在你將旋轉後的檔案用於最終專案之前,確認方向、尺寸、透明度和任何重要的邊緣內容。