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


Posted in Javascript onJune 01, 2017

最近因为项目需要用到了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 相关文章推荐
button没写type=button会导致点击时提交
Mar 06 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
angular分页指令操作
Jan 09 Javascript
layui导航栏实现代码
May 19 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 #Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 #Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
BootStrap selectpicker后台动态绑定数据
Jun 01 #Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 #Javascript
Require.JS中的几种define定义方式示例
Jun 01 #Javascript
You might like
PHP环境搭建最新方法
2006/09/05 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
VueJs组件之父子通讯的方式
2018/05/06 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python 生成器协程运算实例
2017/09/04 Python
用Eclipse写python程序
2018/02/10 Python
解决python报错MemoryError的问题
2018/06/26 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
网站出售协议书范文
2014/10/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
面试感谢信范文
2015/01/22 职场文书
退休欢送会致辞
2015/07/31 职场文书
详解Redis主从复制实践
2021/05/19 Redis
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电