解决BootStrap Fileinput手机图片上传显示旋转问题
更新时间：2017年06月01日 14:48:02 作者：咕噜噜ooO小鹿
这篇文章主要介绍了 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手机图片上传显示旋转问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇一个简单的JavaScript Map实例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了原生js实现拼图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了HTML界面登录时的JS验证方法,需要的朋友可以参考下2014-05-05
JavaScript 引用类型实例详解【数组、对象、严格模式等】
这篇文章主要介绍了JavaScript 引用类型,结合实例形式详细分析了JavaScript 数组、对象、严格模式引用类型相关概念、原理及操作注意事项,需要的朋友可以参考下2020-05-05
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。接下来通过本文给大家介绍js中的this指针和引用，非常不错，需要的朋友参考下2016-08-08
这篇文章主要为大家详细介绍了JS实现图片切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了TypeScript常见类型及应用示例讲解，本章我们会讲解 JavaScript 中最常见的一些类型，以及对应的描述方式，有需要的朋友可以借鉴参考下2022-02-02
最新评论