orientation

使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题，将设备中的照片导出到Windows上时，经常发现导出的照片方向会有问题，要么横着，要么颠倒着，需要旋转才适合观看。而如果直接在这些设备上浏览时，照片会始终显示正确的方向，在Mac上也能正确显示。最近在iOS的开发中也遇到了同样的问题，将拍摄的照片上传到服务器后，再由Windows端下载该照片，发现手机上完全正常的照片到了这里显示的横七竖八。同一张照片为什么在不同的设备上表现的不同？如何能够避免这种情况？本文将和大家一一解开这些问题。 目录 照片的存储演变 胶片时代 数码时代 方向传感器 EXIF(Exchangeable Image File Format) Orientation iPhone上的情况 验证EXIF Mac平台 Windows平台 开发时如何避免 直观的解决方案 第二种简单的方法 结尾 照片的存储演变 一切都得从相机的发展开始说起。 胶片时代 一般相机拍摄出来的画面都是长方形，在拍摄的那一瞬间，它会将取景器中的场景对应的颜色值存到对应的像素位置。相机本身并没有任何方向的概念，只是使用者想要拍摄的场景在他期望的照片中显示的方式与实际存在差异时，才有了方向一说。如下图，对一个场景 F 进行拍摄，相机的方向可能会有这样四个常见的角度： 相机是“自私”的，由于相机仅反应真实的场景，它不理解拍摄的内容

EXIF Orientation 参数让你随便照像但都可以看到正确方向的照片而无需手动旋转（前提要图片浏览器支持，Windows 自带的不支持） 这个参数在佳能、尼康相机照的照片是自带的，但我的奥林巴斯就没有，看照片时不能自动旋转，修正的方法有两个，一个看不顺眼就旋转，另一个是修改 EXIF 中的 Orientation 参数（XnView 浏览器查看缩略图时可以修改） 如果你想在旋转图片时只写入 EXIF 方向信息而不旋转图片就可以用到下面的方法 看图修改很简单 旋转角度 参数 0° 1 顺时针90° 6 逆时针90° 8 180° 3 2，4，5，7功能类似 Photoshop 的水平翻转、垂直翻转，照像时不会出现的，自拍也不会（对着镜子自拍可以，但相机不知道） 读取方法：未旋转的照片读上左旋转后的方向对照下表。相当于把照片当相机，看旋转后相机上方和左方分别对着什么方向 拿名片或相机来转一下最好理解 参数含义： 参数 0行（未旋转上） 0列（未旋转左） 旋转（方法很多） 1 上 左 0° 2 上 右 水平翻转 3 下 右 180° 4 下 左 垂直翻转 5 左 上 顺时针90°+水平翻转 6 右 上 顺时针90° 7 右 下 顺时针90°+垂直翻转 8 左 下 逆时针90° 照像者面对相机（非被照像的人，即是未旋转照片）上边为0行，左边为0列

前提： 相机中拍的照片放到web上不会自动识别方向，如有些竖向显示的照片放到web上横向显示。这些照片在windows上是正确显示的。但是web不会自动旋转照片到正确方向。下面我们通过两种方法来实现这件事情。 EXIF 可交换图形文件格式 。是专门为数码相机的照片设定的，可以记录数据照片的属性信息和拍摄数据。 数码设备拍摄照片时，会把许多属性附加在照片文件里，这些属性构成了大家常说的 Exif 信息 。访问 我的相册 会发现照片下也有对应的 Exif 信息。Exif 中有个 Orientation 字段，用来存放照片方向，这就是我们需要的，看下它的定义 JS 前端解决 如何从图片中获取 Exif 信息，各个语言都有封装好的代码可以直接使用。Javascript 也不例外，国外某同学 08 年就发布了可用代码 。他的做法分为两步，首先通过 Ajax 获取原始二进制 ，这在 firefox 和 webkit 比较好办，在 IE 下需要借助 VBScript 的帮忙；第二步是从原始数据不同位置 获取相关信息 。 从图片 Exif 信息中取到 Orientation 后，就可以根据它来自动旋转图片了，canvas、filter 滤镜、vml、css3 都可以实现图片的旋转。 综合上文， 写了一个 demo ，兼容大部分浏览器。【demo 由一个web端开发人员写的】 其实