Image Exif Orientation 图片方向信息
参考:
stackoverflow – JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
How to Fix a Digital Photo Turned Sideways
Fixing the Top 10 Mistakes in Handling Website Images
什么是 Exif ?
市场上大部分的相机和手机拍摄出来的图片都是横的. 不管你怎么旋转你的手机, 最终的图片一定是横的.
但是呢, 手机会提供一个叫 Exif 的资料, 里头有记入你在拍摄时的手机方向. (注: .png 是没有 exif 的哦, 只有 jpg jpeg 有罢了)
横着拍
直着拍
Exif Oriention 信息用号码来表示方向.
所有的图片显示软件都会依据图片的 Exif Orientation 来呈现图片最终的样子.
图片在旧 browser (2021前) 的问题
如果一张图的 Exif 丢失了, 或被串改了, 就有可能导致展示的结果出错. 这是我们经常会见到图片颠倒的原因.
在 2021 年以前游览器在展示图片时, 是不参考 Exif 信息的, 只有 IOS safari 会处理. 所以这种颠倒的画面在游览器更常见.
在那个年代, 网站的图片都会预先处理掉 Orientation, 做法就是读取 Exif 信息, 然后依据信息做旋转, 然后再把信息删掉即可 (一定要删掉或者 set to 1, 不然其它显示器可能会自动转, 那就错了)
很庆幸的, 2021 年以后, 所有游览器都很聪明了, 会依据 Exif 信息自动转到对的方向来显示. 参考: MDN – image-orientation (注: Chrome 81, Safari 13.1 开始, 它会自动转向. 是一个 breaking change 哦)
自拍和 Flip
当用手机自拍时, 屏幕中看见的是镜子中的你，并不是别人眼中的你.
拍出来的图片也会有这个 Exif Orientation 2, 4, 5, 7 就是表示这个的.
按理说在拍摄时屏幕出现的结果就应该是最终图像的结果, 但是自拍 = 镜子中的你, 显然有点怪, 自己看还好 (就和照镜子一样), 别人看就怪怪的了.
不同手机会对这种情况做不同的处理:
iPhone 自拍是没有 2,4,5,7 的, 它会先 flip 然后在 rotate 然后修改掉 Exif, 比如自拍 2, 它输出的图片是 3 (很奇怪为什么不弄成 1 呢 ?)
华为则是直接 flip rotate 美美然后把 Exif Orientation 删除
小米很奇葩, 它虽然和华为一样, rotate 美美然后删除 Exif, 但是它不会 flip, 所以自拍出来的图片是镜子中的样子.
使用 canvas 实现 flip:
DOM & BOM – 用 Canvas 修图 #Flip Image
How to flip images horizontally with HTML5
CanvasRenderingContext2D.scale()
