七牛

【图片引用方向纠正】直接在图片后面添加

?imageMogr/auto-orient

eg：http://data.upfitapp.com/data/2016/10/18/1629114767606399584.JPG?imageMogr2?imageMogr/auto-orient

【注】七牛有多种这种方法，具体请查看七牛开发者文档

【问题】源于公司使用七牛plupload进行图片上传，最开始使用plupload自己带的属性：

resize: {  width: 100,  height: 100,  crop: true,  quality: 60,  preserve_headers: false}

对图片进行了压缩处理，并且压缩后的图片方向统一，不会出现图片被旋转的问题；

但是当图片的方向参数是Right-top的时候就会出现问题（后面会具体介绍，具体是什么引起的resize压缩出问题还不确定，目前表面上看和实践是这个问题，更深入的就待以后吧）；

具体的表现就是图片永远卡在了上传这步，看官方的最新文档，也没有对resize的介绍了，应该是取消了，原谅我的不求甚解，时间有限

【解答】：

EXIF（Exchangeable Image File）是“可交换图像文件”的缩写，当中包含了专门为数码相机的照片而定制的元数据，可以记录数码照片的拍摄参数、缩略图及其他属性信息，简单来说，Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数，需要注意的是EXIF信息是不支持png,webp等图片格式的。
对于七牛，可以在图片后面加

?exif

参数来获取图片的exif信息。

对于Orientation参数，简单的说是记录图片拍摄的相机的旋转信息，浏览器(需要浏览器支持)可以根据这个参数中的val信息自动旋转图片到正确的方向。

如：

---在浏览器中输入以下图片链接，由于浏览器自动旋转了，我们可以看到一个显示正常的图片：

http://data.upfitapp.com/data/2016/10/18/1629114767606399584.JPG

---其实这张图片拍摄的时候相机是有旋转的，我们可以去掉图片的exif信息显示如下：

http://data.upfitapp.com/data/2016/10/18/1629114767606399584.JPG?imageMogr2/strip

---可以查询到图片的exif信息如下：

http://data.upfitapp.com/data/2016/10/18/1629114767606399584.JPG?exif

有点长：不过不用都看，只要看其中的一个参数就可以了

{  "ApertureValue": {    "val": "2.28 EV (f/2.2)",    "type": 5  },  "BrightnessValue": {    "val": "1.54 EV (9.96 cd/m^2)",    "type": 10  },  "ColorSpace": {    "val": "sRGB",    "type": 3  },  "ComponentsConfiguration": {    "val": "Y Cb Cr -",    "type": 7  },  "Compression": {    "val": "JPEG compression",    "type": 3  },  "DateTime": {    "val": "2016:10:14 07:37:52",    "type": 2  },  "DateTimeDigitized": {    "val": "2016:10:14 07:37:52",    "type": 2  },  "DateTimeOriginal": {    "val": "2016:10:14 07:37:52",    "type": 2  },  "ExifVersion": {    "val": "Exif Version 2.21",    "type": 7  },  "ExposureBiasValue": {    "val": "0.00 EV",    "type": 10  },  "ExposureMode": {    "val": "Auto exposure",    "type": 3  },  "ExposureProgram": {    "val": "Normal program",    "type": 3  },  "ExposureTime": {    "val": "1/33 sec.",    "type": 5  },  "FNumber": {    "val": "f/2.2",    "type": 5  },  "Flash": {    "val": "Flash did not fire, compulsory flash mode",    "type": 3  },  "FlashPixVersion": {    "val": "FlashPix Version 1.0",    "type": 7  },  "FocalLength": {    "val": "4.2 mm",    "type": 5  },  "FocalLengthIn35mmFilm": {    "val": "29",    "type": 3  },  "GPSAltitude": {    "val": "32.074",    "type": 5  },  "GPSAltitudeRef": {    "val": "Sea level",    "type": 1  },  "GPSDateStamp": {    "val": "2016:10:13",    "type": 2  },  "GPSDestBearing": {    "val": "126.4615",    "type": 5  },  "GPSDestBearingRef": {    "val": "T",    "type": 2  },  "GPSImgDirection": {    "val": "126.4615",    "type": 5  },  "GPSImgDirectionRef": {    "val": "T",    "type": 2  },  "GPSLatitude": {    "val": "40, 1, 7.47",    "type": 5  },  "GPSLatitudeRef": {    "val": "N",    "type": 2  },  "GPSLongitude": {    "val": "116, 29, 40.94",    "type": 5  },  "GPSLongitudeRef": {    "val": "E",    "type": 2  },  "GPSSpeed": {    "val": " 0",    "type": 5  },  "GPSSpeedRef": {    "val": "K",    "type": 2  },  "GPSTimeStamp": {    "val": "23:37:52.00",    "type": 5  },  "ISOSpeedRatings": {    "val": "200",    "type": 3  },  "Make": {    "val": "Apple",    "type": 2  },  "MakerNote": {    "val": "838 bytes undefined data",    "type": 7  },  "MeteringMode": {    "val": "Spot",    "type": 3  },  "Model": {    "val": "iPhone 6s",    "type": 2  },  "Orientation": {    "val": "Right-top",    "type": 3  },  "PixelXDimension": {    "val": "4032",    "type": 4  },  "PixelYDimension": {    "val": "3024",    "type": 4  },  "ResolutionUnit": {    "val": "Inch",    "type": 3  },  "SceneCaptureType": {    "val": "Standard",    "type": 3  },  "SceneType": {    "val": "Directly photographed",    "type": 7  },  "SensingMethod": {    "val": "One-chip color area sensor",    "type": 3  },  "ShutterSpeedValue": {    "val": "5.06 EV (1/33 sec.)",    "type": 10  },  "Software": {    "val": "9.3",    "type": 2  },  "SubSecTimeDigitized": {    "val": "486",    "type": 2  },  "SubSecTimeOriginal": {    "val": "486",    "type": 2  },  "SubjectArea": {    "val": "Within rectangle (width 753, height 756) around (x,y) = (2710,1605)",    "type": 3  },  "WhiteBalance": {    "val": "Auto white balance",    "type": 3  },  "XResolution": {    "val": "72",    "type": 5  },  "YCbCrPositioning": {    "val": "Centered",    "type": 3  },  "YResolution": {    "val": "72",    "type": 5  }}

由以上我们可以得到图片拍摄时的val信息得到图片拍摄时相机的旋转信息是Right-top信息，我们可以由以下文档得到相机拍摄时应该是在逆时针选择了90度的基础上拍摄的：下面是相关链接=>

http://sylvana.net/jpegcrop/exif_orientation.html

http://www.impulseadventure.com/photo/exif-orientation.html