bootstrap fileinput之手机图片上传显示旋转问题

编程入门 行业动态 更新时间:2024-10-10 19:23:11

bootstrap fileinput之手机<a href=https://www.elefans.com/category/jswz/34/1760202.html style=图片上传显示旋转问题"/>

bootstrap fileinput之手机图片上传显示旋转问题

最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题。后来通过查询资料了解图片具有EXIF(Exchangeable Image File Format)旋转属性标识,fileinput对旋转进行了处理。预览图片显示的为电脑图片存放方向。

用iPhone手机通过home键朝向四个不同的方向进行拍照后,上传照片显示与预览图片方向并不一致。有点不明白其中缘由,后来发现了规则,只有Home键朝下和朝上的时候才会发现显示不一致问题。解决方案如下:


fileinput.css、fileinput.min.css文件中,css样式旋转角度存在问题,修改以下样式就可以啦。关于图片旋转问题详见:.html说的很详细呢。


Home键朝下拍摄

.rotate-6 {
    /*transform: rotate(90deg);原代码*/
    transform: rotate(270deg);
}


Home键朝上拍摄

.rotate-8 {
    /*transform: rotate(270deg);原代码*/
    transform: rotate(90deg);
}

更多推荐

bootstrap fileinput之手机图片上传显示旋转问题

本文发布于:2024-02-11 21:23:40,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1683586.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:图片上传   手机   bootstrap   fileinput

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!