解决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 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JavaScript中的细节分析
Jun 30 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
JS简单计算器实例
Jan 20 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 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
一个改进的UBB类
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
Python 模块EasyGui详细介绍
2017/02/19 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
高二历史教学反思
2014/01/25 职场文书
安全施工标语
2014/06/07 职场文书
商务经理岗位职责
2014/07/30 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
患者身份识别制度
2015/08/06 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
spring cloud 配置中心native配置方式
2021/09/25 Java/Android