解决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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
javascript canvas时钟模拟器
Jul 13 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常用正则表达式的整理汇总
2013/06/08 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
js类 from qq
2006/11/13 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python实现换位加密算法的示例
2018/10/14 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
SQL Server面试题
2016/10/17 面试题
仓库保管员岗位职责
2013/12/20 职场文书
大专生求职信
2014/06/29 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
机关职员工作检讨书
2014/10/23 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
地震慰问信
2015/02/14 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
实习感想范文
2015/08/10 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书