解决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之大字符串的连接的StringBuffer 类
May 08 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 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的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Python 将pdf转成图片的方法
2018/04/23 Python
python基于http下载视频或音频
2018/06/20 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python range与enumerate函数区别解析
2020/02/28 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
结婚周年感言
2014/02/24 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
监理中标通知书
2015/04/16 职场文书
开国大典观后感
2015/06/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
医德医风学习心得体会
2016/01/25 职场文书