寒假比赛总结(一) - 解决HTML移动端竖拍照片旋转90度的问题

前言在这次寒假比赛中遇到了许多坑,有些坑堪称奇葩,比如说下面这个比较神奇的坑:HTML5中类型为file的input元素在上传图片,展示出来后,某些手机竖拍的照片会逆时针旋转90度的问题。概述发现这个bug大概在一周前,因为我们这个比赛项目需要用户上传图片,并能在发布之前预览。在预览的时候发现竖着拍的照片居然都旋转了90度!于是Google之,发现基本上所有机型手机的相机都存在这个问题(我当时用于测试的手机是小米Note3 MIUI 9,期间也尝试过iPhone、iPad等机型,均发现此问题)。导致旋转90度的原因大概是HTML自动将旋转角减去了90度。解决问题用到的工具/库要解决这个问题,首先需要读取照片的旋转角度(Orientation),而EXIF.JS可以读出照片的旋转角度:我拿了一张用小米Note3的相机拍摄的照片测试,根据EXIF.JS读出的信息得出这张图片的方向角度是90度。思路其实用EXIF.JS读出来是一堆tags,从tags中找到Orientation的值,如果图片的方向是90度,那么Orientation的值就为6。所以,我们只需要在拿到图片之后放进EXIF.JS里判断一下Orientation的值是否为6,如果为6,那么就将图片绘制到一个隐藏的Canvas里,再使用Canvas的rotate API进行旋转,最后再将修改好的图片输出。步骤在Webpack项目中安装EXIF.JS:npm install exif-js --save 在项目中引入EXIF.JS:import…