圖片上傳後畫面會旋轉
本文件說明手機拍照上傳圖片後，常見方向顯示異常的原因，並提供前端與後端處理建議，協助解決圖片旋轉問題。
問題描述
手機拍照並上傳圖片時，雖然在手機本身顯示正常，但在部分瀏覽器或裝置上可能出現方向異常（如橫向變直向、倒置等）。 造成此問題的原因如下：
- 手機拍照時，圖片會記錄 EXIF 方向資訊，手機端能正確解析並顯示。
- 現代瀏覽器以
<img>/background-image直接顯示 JPEG 時，已預設依 EXIF 方向轉正（image-orientation: from-image，Chrome 81+、Firefox、Safari 皆然），通常不會顯示異常。方向問題主要出現在不套用 EXIF 的處理路徑——如用 canvasdrawImage、FileReader+ canvas 做預覽，或 EXIF 被剝除／未保留時。 - 圖片上傳後若 EXIF 資訊被移除或未正確處理，也會造成方向錯誤。
前端處理方式
- 讀取 EXIF 資訊判斷圖片原始方向，再用 JavaScript（canvas）修正。注意 exif-js 已長年停止維護，現代可改用 exifr、blueimp-load-image，或瀏覽器原生
createImageBitmap(blob, { imageOrientation: 'from-image' })。
實作步驟
- 安裝現役函式庫（exifr 或 blueimp-load-image），或直接用瀏覽器原生
createImageBitmap(blob, { imageOrientation: 'from-image' })免裝套件。 - 讀取圖片檔案並取得 EXIF Orientation 資訊。
- 根據 Orientation，使用 canvas 旋轉圖片至正確方向（用
createImageBitmap則由瀏覽器自動轉正）。 - 將修正後的圖片顯示或上傳。
後端處理方式
- 伺服器端自動修正圖片方向，移除 EXIF 方向資訊。
結論
建議由後端統一處理圖片方向問題，於圖片上傳時先判斷 EXIF 方向並自動轉正，移除或修正 EXIF 方向資訊，確保所有裝置與瀏覽器皆能正確顯示圖片，簡化前端負擔並提升使用者體驗。
參考資料
- exifr — 現役 EXIF 解析函式庫
- blueimp-load-image — 載入即依 EXIF 轉正
- exif-js — 已停止維護，僅供歷史參考