解决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 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
详解微信小程序工程化探索之webpack实战
Apr 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函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript