解决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注入攻击?
Sep 14 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
JS验证码实现代码
Sep 14 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
详解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中比较时间大小实例
2014/08/21 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
django_orm查询性能优化方法
2018/08/20 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python 带时区的日期格式化操作
2020/10/23 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
志愿者服务感言
2014/02/27 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
学习经验交流会总结
2015/11/02 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
如何用python绘制雷达图
2021/04/24 Python