手机拍照上传图片，在background-image配置中，旋转90度

修改方式是用img的src引入图片；
想达到background-size:cover效果； |
可以使用object-fit: cover实现相同效果；
具体object-fit介绍，先mark，深入待续……

    在刚拿到这个问题的时候，我直接取oos云端看我的图片，发现竖屏拍照的图片是横向显示，我初步把问题定位在oos上传带着exif参数了（传图时拍照的图片会带exif参数，里面的Orientation参数确定图片是否旋转）

    那么显示的阿里云的OOS对这个做处理有api，就是在显示的图片后面缀上auto-orient,0；
    具体可看链接https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1290.4f2a17f1fuFjIg

    我试了一下，木得作用，然后复制云端image url 发现图片方向没有问题，诶 这条路没成功

    然后我想url访问图片方向么得问题啊，放img src试试呢，果然没问题，那么就应该是background-image的问题咯，如果换成src引入图片呢，解决cover属性就阔以了；所以利用object-fit 实现了功能；

魅族手机拍照上传图片放在background-image:url 引入  竖屏拍照的图片会重复显示，改成img标签 src引入，该问题也迎刃而解了；具体解决原理还是得待续……  感觉自己挖了蛮多坑要埋，好开森……

不幸的是……部分安卓手机还是会旋转图；所以还是引入了exif的库来处理这个问题；稍后再放出代码吧

 

 

续~~~

引入了exif库来做

首先在获取到文件的位置， 

// 获取上传图片的旋转方向
        function getImageDirection(file) {
            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var exif = EXIF.readFromBinaryFile(this.result);
                orientation = exif.Orientation;  // 这里是全局属性，可以根据子机项目定义变量
                // 苹果手机exif旋转信息错误
                if ( !exif.Make || exif.Make === 'Apple') {
                    orientation = 1;
                }
            }
            fileReader.readAsArrayBuffer(file);
        }

然后根据orientation值，来给图片加上旋转样式 利用css3的rotate属性；

            switch(rientation) {
                case 6 :
              
                    uploadAvatar.classList.add('rotate6');
                    break;
                case 3 :
                    
                    uploadAvatar.classList.add('rotate3');
                    break;
                case 8 :
                    
                    uploadAvatar.classList.add('rotate8');
                    break;
                default:
                    removeImgClass();
                    break;
            }





对应的css样式
.rotate6 {
    transform: rotate(90deg)
}
.rotate8 {
    transform: rotate(-90deg)
}
.rotate3 {
    transform: rotate(180deg)
}

好啦，到这里基本就圆满结束啦~