zoukankan      html  css  js  c++  java
  • 图片Exif 信息中Orientation的理解和对此的处理

    这个问题是在用七牛上传图片后获取宽高时发现的,一张图片,用图片浏览器打开始终是竖图,但是查看属性或者用七牛获取宽高,却发现宽大于高,也就是在属性中这是个横图。这样导致客户端用该宽高来展示图片会出现问题。

    下面有个例子,可以参考:

    1,图片地址是:http://7xt44n.com2.z0.glb.qiniucdn.com/exif.png

    打开可以看到是竖图。

    2,用七牛的api将所有额外信息去除,再看来这张图片:http://7xt44n.com2.z0.glb.qiniucdn.com/exif.png?imageMogr2/strip

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

    本人对于图形学完全没有研究,在咨询了一位图形学博士后得到了答案,原来是因为相机给图片的exif信息加上了一个Orientation,然后图片浏览器会对这个属性做出兼容,让图片以竖图的形式显示出来。下面我来对Orientation这个属性做一些解释。

    EXIF Orientation 参数让你随便照像但都可以看到正确方向的照片而无需手动旋转,这个参数有以下几个值:

    EXIF Orientation ValueRow #0 is:Column #0 is:
    1 Top Left side
    2 Top Right side
    3 Bottom Right side
    4 Bottom Left side
    5 Left side Top
    6 Right side Top
    7 Right side Bottom
    8 Left side Bottom

    说实话这个表实在太难看懂了,即使是它变成中文:

    参数 0行(未旋转上) 0列(未旋转左) 旋转(方法很多)
    1
    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°旋转的图,那就把宽高手动换一下,就可以了。

  • 相关阅读:
    linux下实现nginx反向代理
    linux下实现nginx安装实现端口区分,域名区分
    redis整合spring
    linux下安装redis以及redis集群
    Kindeditor编辑器
    ActiveMQ
    redis(保存邮件激活码)
    AngularJS (验证码倒计时)
    linux部署项目(oracle+redis+activeMQ+elasticSearch+tomcat+JDK8)
    WebService
  • 原文地址:https://www.cnblogs.com/csonezp/p/5564809.html
Copyright © 2011-2022 走看看