怎么解决BootStrap Fileinput手机图片上传显示旋转问题

发布时间:2021-06-29 13:55:34 作者:小新
来源:亿速云 阅读:251

这篇文章主要介绍怎么解决BootStrap Fileinput手机图片上传显示旋转问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

最近因为项目需要用到了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手机图片上传显示旋转问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
  2. BootStrap Fileinput插件和Bootstrap table表格插件如何实现文件上传、预览、提交等功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap fileinput

上一篇:php将图片保存入mysql数据库失败如何解决

下一篇:Android应用程序环境如何调整

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》