解决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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
详解vue 命名视图
Aug 14 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JS中准确判断变量类型的方法
Jun 01 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实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python如何实现int函数的方法示例
2018/02/19 Python
pandas 选择某几列的方法
2018/07/03 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python dlib人脸识别代码实例
2019/04/04 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
个人承诺书格式
2014/06/03 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
数学教师求职信范文
2015/03/20 职场文书
业务内勤岗位职责
2015/04/13 职场文书
爱心捐书倡议书
2015/04/27 职场文书
商场广播稿范文
2015/08/19 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书