首页新闻找找看学习计划

图片在浏览器中被自动旋转的问题

0
悬赏园豆:200 [已解决问题] 解决于 2017-11-03 13:21

在博问的这个提问(VS2010安装问题)中发现的,其中的图片在博问页面中显示时被自动旋转了,而直接访问图片的地址是正常的。

在 stackoverflow 上有人遇到了同样的问题 Is there a way to tell browsers to honor the jpeg exif orientation?

 image-orientation: from-image; 可以解决这个问题,但 Chrome 与 Safari 以及 IE 都不支持这个样式代码,只有Firefox支持。

请问如何简单有效的解决这个问题?

css
dudu的主页 dudu | 高人七级 | 园豆:39065
提问于:2017-10-31 11:55
< >
分享
最佳答案
1

手机拍照上传原图,会在EXIF中保留图片旋转角度orientation,img标签展示图片就是旋转的。浏览器单独打开图片会帮你处理旋转,所以看到的是打开图片是正常的。要处理这个问题,要么上传图片时候前端或者后台处理校正偏转。要么展示图片时候使用js FileReader 读取文件EXIF信息,并且偏转重绘图片。

收获园豆:150
hello*boy | 菜鸟二级 |园豆:310 | 2017-11-03 13:03
其他回答(3)
0

应该手机上传的图片带有exif格式吧! 阿里云的oss开发文档上处理这个手机旋转的解决方案:
https://help.aliyun.com/document_detail/44691.html?spm=5176.doc31947.6.952.ZPYiHr

收获园豆:10
hellotim | 园豆:1474 (小虾三级) | 2017-10-31 13:31
0
收获园豆:20
海之殇 | 园豆:472 (菜鸟二级) | 2017-10-31 16:14
0

正是楼上说的exif的信息导致的,https://exif.tuchong.com/ 传上去可以看到图片被旋转了180度。上传的时候移除这些exif信息最彻底...,或者选择上传时压缩下图片生成新图,自动去掉这些信息。

收获园豆:20
blackheart | 园豆:2284 (老鸟四级) | 2017-11-01 09:51
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册