解决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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
在JavaScript中如何使用宏详解
May 06 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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给图片加文字水印
2015/07/31 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
可以文本显示的公告栏的js代码
2007/03/11 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
小程序自定义弹框效果
2020/11/16 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python实战之制作天气查询软件
2019/05/14 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Pycharm github配置实现过程图解
2020/10/13 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
国培计划培训感言
2014/03/11 职场文书
毕业证委托书范文
2014/09/26 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2015年保送生自荐信
2015/03/24 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
MySQL系列之十一 日志记录
2021/07/02 MySQL
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python