[C#] 關於 Rotate 90 CW 解決 iPhone 拍照網頁使用問題

2020-02-27

這一陣子遇到一個很惱人的問題,因為最近處理到有朋友需要直接把照片上傳到網站上,他是透過手機拍照,然後利用 iPad or iPhone 上傳照片,他是直的拍,他用手機看也是直的,上傳到網頁上面,他用 Safari or Chrome on iPhone Device 也是直的,但是我電腦看就變成橫的,如果用電腦上面的 Chrome 直接看那張圖就是直的,非常詭異,順帶一題我電腦是 Windows 10 + Chrome 去看得,仔細看了一下,我猜測是 照片 EXIF 的問題,結果經過測試真的是…


如上圖,在 iPhone 的世界中拍照時後 你手機頭部往左的拍照,這叫做正常,之後你打直拍照,在 EXIF 中 Orientation 會變成 Rotate 90 CW  其中 CW  的意思就是指順時針(ClockWise),所以從手機頭部往左叫做正常分別順時針旋轉,分別角度是 Horizontal (normal)、Rotate 90 CW、Rotate 180、Rotate 270 CW。

所以基本上如果你在後台拿到這張照片,你希望前面一律顯示正常,你需要自己將圖片順時針轉 90度之後再往前端送,我的作法不一定很好,如果你有更好的方法也可以跟我說一下。

Step1. 首先,我們得先了解 EXIF 資訊抓出 Orientation ,我是透過一個 nuget 上的套件 MetadataExtractor (https://www.nuget.org/packages/MetadataExtractor/)

列出所有參數:

所以我們可以透過這樣拿到  Orientation  的資訊



Step2. 在來就是轉向的問題 ,基本上我是用 .net 內建的 System.Drawing 的進行轉向



這樣看起來解決了問題了,這點真的很惱人,因為不一樣瀏覽器根據照片直出真的比較麻煩。

參考網站:

https://stackoverflow.com/questions/46476930/change-exif-in-photo-metadata-extractor-c-sharp

https://docs.microsoft.com/zh-tw/dotnet/api/system.drawing.rotatefliptype?view=netframework-4.8


當麻許的超技八 2014 | Donma Hsu Design.