七牛--關於圖片上傳方向不統一的問題--主要關於圖片EXIF信息中旋轉參數Orientation的理解

【圖片引用方向糾正】直接在圖片后面添加

?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信息為准