exif

iOS版微信有一项功能：当你在朋友圈发照片的时候，就可以根据照片的拍摄地点显示地理位置。 在微信朋友圈上传图片时，点击位置可以自动识别照片拍摄的地理位置 过去我们发送朋友圈时，可以显示自己所在的位置信息，而现在自动读取照片拍摄位置让不少人联想到了图像识别技术。事实上，微信所做的并没有这么复杂，有业内人士告诉新功能是基于图片位置信息（即Exif的GPS定位信息）实现的。 什么是Exif？ Exif（Exchangeable Image File）是一种图像文件格式，它最早是由日本电子和信息技术协会（JEITA）为相机相机厂商制定一套标准。 现在，任何一部手机拍出的照片都有一组Exif参数，Exif除了有像素信息之外，还包含了光圈、快门、白平衡、ISO、焦距、日期时间等各种图像信息以及相机品牌、型号、色彩编码、拍摄时录制的声音以及GPS全球定位系统数据。 理论上，只要不经过特殊处理，每张图片的Exif信息会一直保留。 微信做了什么？ 微信这次的新功能很有可能就是调用了Exif中的GPS全球定位系统数据，这些数据都来自于手机内部的传感器以及陀螺仪。 雷锋网在某Exif查看器上对手机拍摄的照片进行了试验，结果显示只要图片未被压缩，日期时间、拍照设备型号、像素以及光圈快门等信息都能记录下来，而位置信息则需要用户打开GPS才能展现出来。 如上图所示，Exif涵盖的位置信息有经度、纬度以及海拔

使用过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端开发人员写的】 其实

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。 因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 这里主要利用 exif.js 读取照片的拍摄信息。 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。 EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。 这里主要 用到 Orientation 属性。 Orientation 属性说明如下： 在页面中首先引入 exif.js 主要代码如下： //获取照片的元信息（拍摄方向） function getPhotoOrientation(img) { var orient; EXIF.getData(img, function() { orient = EXIF.getTag(this, "Orientation"); }); return orient; } //获取照片的拍摄方向 var orient = getPhotoOrientation(image); //判断图片拍摄方向是否旋转了90度 if (orient == 6) {