修改方式是用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的库来处理这个问题;稍后再放出代码吧
续~~~
<script src="/js-lib/exif.min.js"></script> 引入了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)
}
好啦,到这里基本就圆满结束啦~