解决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 相关文章推荐
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序如何实现全局重新加载
Jun 05 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 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/01/17 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解vue 命名视图
2019/08/14 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python学习教程之使用py2exe打包
2017/09/24 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python 爬取疫情数据的源码
2020/02/09 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
销售高级职员求职信
2013/10/29 职场文书
综治维稳工作汇报
2014/10/27 职场文书
中学生检讨书1000字
2014/10/28 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript