解决BootStrap Fileinput手机图片上传显示旋转问题

不是每天都有阳光,不是每天都会凉爽,只要我们心中有阳光,人生总会是晴朗,只要我们心中有凉爽,每天都会充满希望。早安!

最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题。后来通过查询资料了解图片具有EXIF(Exchangeable Image File Format)旋转属性标识,fileinput对旋转进行了处理。预览图片显示的为电脑图片存放方向。

用iPhone手机通过home键朝向四个不同的方向进行拍照后,上传照片显示与预览图片方向并不一致。有点不明白其中缘由,后来发现了规则,只有Home键朝下和朝上的时候才会发现显示不一致问题。解决方案如下:

fileinput.css、fileinput.min.css文件中,css样式旋转角度存在问题,修改以下样式就可以啦。Home键朝下拍摄

.rotate-6 {
 /*transform: rotate(90deg);原代码*/
 transform: rotate(270deg);
}

Home键朝上拍摄

.rotate-8 {
 /*transform: rotate(270deg);原代码*/
 transform: rotate(90deg);
}

以上所述是小编给大家介绍的BootStrap Fileinput手机图片上传显示旋转问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

本文解决BootStrap Fileinput手机图片上传显示旋转问题到此结束。人生之路无坦途,走出困境天地宽。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
ajax上传图片到PHP并压缩图片显示的方法

Ajax实现图片上传并预览功能

ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

基于Spring Boot利用 ajax实现上传图片功能

React+ajax+java实现上传图片并预览功能