ImageExifOrientation图⽚⽅向信息
参考:
什么是 Exif ?
市场上⼤部分的相机和⼿机拍摄出来的图⽚都是横的. 不管你怎么旋转你的⼿机, 最终的图⽚⼀定是横的.
但是呢, ⼿机会提供⼀个叫 Exif 的资料, ⾥头有记⼊你在拍摄时的⼿机⽅向. (注: .png 是没有 exif 的哦, 只有 jpg jpeg 有罢了)
横着拍
直着拍
Exif Oriention 信息⽤号码来表⽰⽅向.
exif信息所有的图⽚显⽰软件都会依据图⽚的 Exif Orientation 来呈现图⽚最终的样⼦.
图⽚在旧 browser (2021前) 的问题
在 2021 年以前游览器在展⽰图⽚时, 是不参考 Exif 信息的, 只有 IOS safari 会处理. 所以这种颠倒的画⾯在游览器更常见.
在那个年代, ⽹站的图⽚都会预先处理掉 Orientation, 做法就是读取 Exif 信息, 然后依据信息做旋转, 然后再把信息删掉即可 (⼀定要删掉或者set to 1, 不然其它显⽰器可能会⾃动转, 那就错了)
很庆幸的, 2021 年以后, 所有游览器都很聪明了, 会依据 Exif 信息⾃动转到对的⽅向来显⽰. 参考: (注: 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:
发布评论