相片副檔名
之前在實作上傳圖檔活動時, 使用副檔名為 .jpg 的約束條件, 但發現在 iOS 設備選擇相片後, 無法成功通過驗證, 經實測後, 發現存在 iOS 相簿裡的 jpg 相片都是以 .jpeg 為副檔名, 所以在上傳時, 會無法通過副檔名驗證.
即使將 .jpg 圖檔存下在 iOS 設備裡的相簿, 也會被轉換檔名為 .jpeg 的副檔名, 這個狀況需要在實作上傳圖檔時需要特別留意.
相片方向
使用 iOS 設備拍照時, 存放檔案方式, 會以橫放方式存放 ( w > h ), 但直拍時, 一樣使用橫放方式存檔, 但是會有個 orientation 為轉向, 方向為 right-top (6), 也就會變成直向, 詳情可參考這裡的圖片與說明:
https://www.impulseadventure.com/photo/exif-orientation.html
所以若是 6 就可以利用順時鐘轉 90度回來正確的檢視.
相片方向在網頁上
另外有趣的現象是, 該圖在 PC / Mac 桌機, Android 手機時, 直接放在 web 連接, 會是正常的轉向出來, 但放在 html 裡使用 img src 的方式, 則會無法轉向, 不過 iOS 設備在 html img src 引用時, 仍能正常轉向.
測試與重製
使用一張 iOS 拍照, 但縮小保留 EXIF 轉向資訊圖片供測試參考:
https://codepen.io/timhuang/full/ZmmQjy/
在 iOS 設備上可以正常轉向, 但其他不然, 但又是直接連結也是可以成功轉向的, 第三個部分則是使用了 images.weserv.nl 服務, 它會將原來的圖檔轉正, 並將轉向改為正向方向, 也就能解決這個問題. 這個服務的介紹可以參考: https://diary.tw/archives/221