用ghost发文章(发到阿里云的CDN)的时候,发现上传的图片旋转了。比如这张图:
但是,在我的Mac本地上是正常的。像这样子的:
打开预览的效果也是正常的。
然后,我傻傻以为是Ghost的问题。其实并不是。
这里,要开始引出EXIF这个概念。
EXIF
EXIF(Exchangeable Image File)是“可交换图像文件”的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数、缩略图及其他属性信息。
图像一旦被修改,Exif 信息可能会永久丢失,故编辑 Exif 必须使用专门的软件。
可以理解成,用来记录照片属性和拍摄数据的。
(可以附加于jpeg等文件中,但png图片中不会有。)
Orientation
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度回到正常
8:顺时针90度回到正常
Mac上为什么会是正常的呢?
Mac之所以会显示正常,是因为Mac的图片“预览”功能会自动根据Orientation参数处理照片方向。但实际上,照片是旋转的。
来看看实际参数是怎样的:
用Mac的预览的 工具 - 显示检查器
这里可以看到方向是6(逆时针旋转90度将回到正常)
顺带说一下,可以看到好多EXIF参数信息(我是用pad拍的):
Windows平台上呢?
windows上默认的图片预览工具没有做处理,如果拍摄的时候是旋转的,那显示的也是旋转的。
在Mac上怎么转回来?
用Mac的“预览”功能打开,再Command + S保存,参数就改变了,上传的图片就正了。
于是, Orientation参数就从6(逆时针旋转90度回到正常)变为了1(正常)。
利用专业的修改EXIF的工具
暂时没有用过,欢迎推荐好用的工具。
关于前端获取EXIF
有一个框架可以读取图像的原始数据:Exif.js。IE10以下不兼容。
demo效果:http://code.ciaoca.com/javascript/exif-js/demo/
github地址:https://github.com/jseidelin/exif-js/