解决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 相关文章推荐
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
JAVA面试题 static关键字详解
Jul 16 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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数组的使用方法小结
2010/09/23 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python函数的作用域及关键字详解
2019/08/20 Python
python list转置和前后反转的例子
2019/08/26 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
如何用Django处理gzip数据流
2021/01/29 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
二年级语文教学反思
2014/02/02 职场文书
预备党员表决心书
2014/03/11 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis