解决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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JS重要知识点小结
Nov 06 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
element 动态合并表格的步骤
Dec 31 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访问查询mysql数据的三种方法
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP反向代理类代码
2014/08/15 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
Python 学习笔记
2008/12/27 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python游戏开发的五个案例分享
2020/03/09 Python
python opencv进行图像拼接
2020/03/27 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
印度网上药店:1mg
2017/10/13 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
小学生环保标语
2014/06/13 职场文书
校园会短篇的广播稿
2014/10/21 职场文书