更新 : 2019-01-02
refer
https://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5 (使用 canvas 做 flip)
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale
之前沒有說到關於 flip 的概念
當我們用手機自拍時, 屏幕中我們看見的是鏡子中的自己，並不是別人眼中的自己哦.
那拍出來的圖片也會有這個 exif information
按理說我們在拍攝時屏幕出現的結果就應該是最終圖像的結果，但是自拍 = 鏡子中的你，顯然有點怪，自己看不起怪，別人看就怪怪的
所以一般上遇到這類的圖片我們需要 flip, 反向回去.
上面 2 個 refer 是說 canvas 如果做到這個效果, 在 crop 圖的時候可以用上.
asp.net core 用 Magick.NET 這個庫，里頭也是有 .flip() 這個功能.
注 :不同手機對圖片的處理是不同的
比如 iphone 自拍是沒有 2,4,5,7 的，iphone 會先 flip 然后在 rotate 然后修改掉 exif, 比如你自拍 2, iphone 輸出的圖片是 3 (很奇怪為什么不弄成 1 呢 ？)
華為則是直接 flip rotate 美美然后把 exif orientation 刪除
小米很奇葩, 它雖然和華為一樣, rotate 美美然后 exif 干掉 但是它不會 flip.... 所以自拍出來的圖片是鏡子中的人...
https://foobuzz.github.io/
https://www.thoughtco.com/why-is-my-picture-turned-sideways-1701398
http://cloudinary.com/blog/top_10_mistakes_in_handling_website_images_and_how_to_solve_them
市場上大部分的相機,手機拍攝出來的圖片都是橫的. 不管你怎么旋轉你的手機, 最終的圖片一定是橫的.
但是呢, 手機會提供一個叫 Exif 的資料, 里頭有表面你在拍攝時的手機方向.
這是標准方向
這是 90 度的方向
所有的圖片展示軟件都依據圖片和旋轉信息 Exif 來呈現圖片最終的樣子.
如果一張圖的 Exif 丟失了, 或被串改了, 就有可能導致展示的結果出錯. 這就是你經常會看見圖片顛倒的原因.
然而當前的游覽器在展示圖片時, 都不參考 Exif 信息, 目前只有 IOS safari 會處理. 所以這種顛倒的畫面在游覽器更常見.
那么我們該i怎么處理呢？
如果網頁的圖片都是通過網頁 upload 的，那么在 upload 的時候我們需要把帶有 exif 信息的圖片轉換成沒有 exif 的圖片 ( 這里需要旋轉到正確方向 )
exif.js 可以獲取到圖片信息, 然后通過 canvas 我們可以輕易的重繪一張圖(要旋轉到對的方向哦). 之后我們就可以把信息丟掉了.
注 :png 是沒有 exif 的哦, 好像是只有 jpg jpeg 有罷了.