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

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


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

手机拍照上传图片,在background-image配置中,旋转90度_第1张图片

    那么显示的阿里云的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)
}

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

你可能感兴趣的:(css,exif)