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

时间:2021-03-04 04:11:20

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

?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的理解

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

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

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