解决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的Cookies
Jan 16 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
JavaScript实现动态生成表格
Aug 02 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 microtime获取浮点的时间戳
2010/02/21 PHP
php使用百度天气接口示例
2014/04/22 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
幼儿园教师考核评语
2014/12/31 职场文书
幼师大班个人总结
2015/02/13 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS