调整上传图片的预览方向 (exif.js)

发布时间：2019-06-17 09:24:23 修改时间：2019-06-17 09:24:23 阅读：7959 评论：3 1

原因：最近一个项目，上传的图片比较长的横图，预览的时候自动变成竖图显示，用的chrome，初步判断可能跟浏览器机制有关系，虽说不影响后期图片的使用，但预览这个问题要解决，然后我就上网找到了一个方法（exif.js）。

解决思路：从图片 Exif 信息中取到 Orientation 后，就可以根据它来自动旋转图片了，canvas、filter 滤镜、vml、css3 都可以实现图片的旋转。

解决办法：

• 引入js ：

<script type="text/javascript" src="exif.js"></script>

• 获取图片方向：

//获取照片方向角属性，用户旋转控制  file为当前上传的文件对象

        EXIF.getData(file, function() { 

            EXIF.getAllTags(this);   

            Orientation = EXIF.getTag(this, 'Orientation');  

        });  

• 对预览图片进行旋转：

Orientation属性说明如下：

旋转角度	参数
0°	1
顺时针90°	6
逆时针90°	8
180°	3




然后通过我们获取的Orientation 属性作对比， 旋转方式自行选择，一般我个人用

transform:rotate(90deg)

这个方法解决 ，具体旋转度数，自行判断。

---