时间戳

首页 > 技术文章 > 七牛--关于图片上传方向不统一的问题--主要关于图片EXIF信息中旋转参数Orientation的理解

七牛--关于图片上传方向不统一的问题--主要关于图片EXIF信息中旋转参数Orientation的理解

liu-fei-fei 2016-10-18 18:23 原文

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

?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

 【注】七牛显示的exif信息Orientation”:{“val”:”Right-top”,”type”:3}，其中type信息是可以忽略，以value信息为准

推荐阅读