图⽚Exif信息中Orientation的理解和对此的处理
这个问题是在⽤七⽜上传图⽚后获取宽⾼时发现的，⼀张图⽚，⽤图⽚浏览器打开始终是竖图，但是查看属性或者⽤七⽜获取宽⾼，却发现宽⼤于⾼，也就是在属性中这是个横图。这样导致客户端⽤该宽⾼来展⽰图⽚会出现问题。
下⾯有个例⼦，可以参考：
打开可以看到是竖图。
你会发现这图本⾝其实是个横图。
本⼈对于图形学完全没有研究，在咨询了⼀位图形学博⼠后得到了答案，原来是因为相机给图⽚的exif信息加上了⼀个Orientation，然后图⽚浏览器会对这个属性做出兼容，让图⽚以竖图的形式显⽰出来。下⾯我来对Orientation这个属性做⼀些解释。
EXIF Orientation Value Row #0 is:Column #0 is:
1Top Left side
2Top Right side
3Bottom Right side
4Bottom Left side
exif信息5Left side Top
6Right side Top
7Right side Bottom
8Left side Bottom
说实话这个表实在太难看懂了，即使是它变成中⽂：
参
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°旋转的图，那就把宽⾼⼿动换⼀下，就可以了。
发布评论