拍照图片旋转的问题

[ufologist]

iOS 上传拍照图片由于有方向性, 会造成显示时图片的方向不对, 需要旋转一下

前端解决这个问题的思路

• 读取图片的 EXIF 信息(图片的元数据), 获取到方向
• 根据方向对图片进行旋转

具体的实现库

• Exif.js
• exif2css
• exif-orient

后端解决这个问题的可以使用阿里云图片处理: 自适应方向

某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。可以设置是否对这些图片进行旋转。默认是设置自适应方向

进行自适应方向旋转，要求原图的宽度和高度必须小于 4096。

例如

• 

• 

  http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/auto-orient,1

• 

  http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/resize,w_4096/auto-orient,1

注意: 很多浏览器(例如 Chrome)直接打开图片时默认都做了自适应方向的处理(IE 11 没有做图片自适应方向), 所以很容易给人错觉, 觉得图片本身是好的.
但当图片显示在 Web 页面中时, 例如在 img 标签或做为背景图片使用时, 图片的方向又是错误的.

PS: 阿里云图片处理可以查看图片的 EXIF 信息

例如: http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/info