解决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代码格式化和语法着色V2
Oct 14 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
vue elementui form表单验证的实现
Nov 11 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
使用 MySQL Date/Time 类型
2008/03/26 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python正则表达式使用经典实例
2016/06/21 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python threading的使用方法解析
2019/08/28 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
神路信息Java面试题目
2013/03/31 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
培训研修方案
2014/06/06 职场文书
python绘制箱型图
2021/04/27 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL