orientation

图⽚Exif信息中Orientation的理解和对此的处理

这个问题是在⽤七⽜上传图⽚后获取宽⾼时发现的，⼀张图⽚，⽤图⽚浏览器打开始终是竖图，但是查看属性或者⽤七⽜获取宽⾼，却发现

宽⼤于⾼，也就是在属性中这是个横图。这样导致客户端⽤该宽⾼来展⽰图⽚会出现问题。

下⾯有个例⼦，可以参考：

打开可以看到是竖图。

你会发现这图本⾝其实是个横图。

本⼈对于图形学完全没有研究，在咨询了⼀位图形学博⼠后得到了答案，原来是因为相机给图⽚的exif信息加上了⼀个Orientation，然后

图⽚浏览器会对这个属性做出兼容，让图⽚以竖图的形式显⽰出来。下⾯我来对Orientation这个属性做⼀些解释。

EXIFOrientation参数让你随便照像但都可以看到正确⽅向的照⽚⽽⽆需⼿动旋转，这个参数有以下⼏个值：

EXIFOrientationValueRow#0is:Column#0is:

1TopLeftside

2TopRightside

3BottomRightside

4BottomLeftside

5LeftsideTop

6RightsideTop

7RightsideBottom

8LeftsideBottom

说实话这个表实在太难看懂了，即使是它变成中⽂：

参

数

0⾏（未旋转上）0列（未旋转左）旋转（⽅法很多）

1上左0°

2上右⽔平翻转

3下右180°

4下左垂直翻转

5左上顺时针90°+⽔平翻转

6右上顺时针90°

7右下顺时针90°+垂直翻转

8左下逆时针90°

满眼的上下左右真是看的眼花。⽹上流传的还有⼀张图⽰：

这张图⾥的数字对应的就是表格⾥的数字。我来看着这个图⽤我⾃⼰的理解给⼤家解释⼀下，可能不标准，但是能助于你理解这个参数：

表格⾥的0⾏，你可以理解为你看到的旋转后（加上参数，被浏览器⾃动旋转）的图⽚的上⽅向，0列你可以理解为你看到的旋转后的图⽚

的左⽅。⽽表格⾥没⼀⾏的数据，就是该⽅向对应的原来的图⽚的⽅向。

⽐如参数值1,0⾏是上，0列是左，意思也就是旋转后的上⽅是原图的上⽅，旋转后的左⽅是原图的左⽅；

参数值2,0⾏是上，0列是右，那就是旋转后的上⽅是原图的上⽅，旋转后的左⽅是原图的右⽅；

参数值8,0⾏是左，0列是下，那就是旋转后的上⽅是原图的左⽅，旋转后的左⽅是原图的下⽅；

这三个例⼦，配合着图⽚和表格，多看即便，总能理解这个参数的意思的。

下⾯要讲讲我的处理办法了。其实在移动端，图⽚库都会对这个参数做出兼容的，你只需要保证你的宽⾼不倒置，移动端就可以正常显⽰。

所以我的处理办法就是图⽚上传完毕后，调⽤七⽜的exif接⼝，获取exif信息，然后对Orientation进⾏判断，如果这个图⽚是⼀个90°旋

转的图，那就把宽⾼⼿动换⼀下，就可以了。