图片方向 image orientation Exif

Posted 2020-10-07 兴杰(stooges.com.my)

更新 : 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://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images

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 有罢了.