解决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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解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打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
js数组操作学习总结
2013/11/04 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python输出各行命令详解
2018/02/01 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
银行求职推荐信范文
2013/11/30 职场文书
烹饪自我鉴定
2014/03/01 职场文书
六一亲子活动总结
2014/07/01 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
建党伟业电影观后感
2015/06/01 职场文书
行政复议答复书
2015/07/01 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电