图片上传服务器后被自动旋转

关键词：图片旋转，EXIF，前端
原文：http://makaiqian.com/exif-orientation/

前端上传图像到后台时，有时候会发现图像旋转了。比如这张图：

后台服务器显示情况

但在我的电脑上预览和显示是这样子的：

本地显示是这样子

一开始以为是前端代码的问题，其实并不是。这里要引入 EXIF的概念。

EXIF

EXIF（Exchangeable Image File）是“可交换图像文件”的缩写，当中包含了专门为数码相机的照片而定制的元数据，可以记录数码照片的拍摄参数、缩略图及其他属性信息。

图像一旦被修改，Exif 信息可能会永久丢失，故编辑 Exif 必须使用专门的软件。

可以理解成，用来记录照片属性和拍摄数据的。（可以附加于jpeg等文件中，但png图片中不会有。）
EXIF中，有一个 Orientation 参数，用于记录照片生成时的方向。 一共有8个值，分别是：1、2、3、4、5、6、7、8。

正常情况下，拍照只会出现是1、6、3、8这几个值。2、5、4、7相当于镜像，照像时不会出现这几种情况。1、6、3、8的效果分别是：

• 1：0度（比如正常情况下我是这样拍摄的）
  拍摄角度

• 6：逆时针90度回到正常
  旋转回正常角度

• 3: 180度回到正常
  顺/逆时针180都能回到正常

• 8：顺时针90度回到正常
  顺时针90度回到正常

Mac上为什么会是正常的呢？

Mac之所以会显示正常，是因为Mac的图片“预览”功能会自动根据Orientation参数处理照片方向。但实际上，照片是旋转的。

用Mac的预览的 工具 - 显示检查器 查看旋转信息：

Preview 查看旋转信息

这里可以看到方向是6（逆时针旋转90度将回到正常）.
顺带说一下，可以看到好多EXIF参数信息（我是用pad拍的）：

图像EXIF信息

Windows平台上呢？

windows上默认的图片预览工具没有做处理，如果拍摄的时候是旋转的，那显示的也是旋转的。

在Mac上怎么转回来？

1. 用Mac的“预览”功能打开，再Command + S保存，参数就改变了，上传的图片就正了。
   Orientation参数就从6（逆时针旋转90度回到正常）变为了1（正常）
2. 利用专业的修改EXIF的工具

关于前端获取EXIF

有一个框架可以读取图像的原始数据：Exif.js。IE10以下不兼容。
demo效果：http://code.ciaoca.com/javascript/exif-js/demo/
github地址：https://github.com/jseidelin/exif-js/