前几天在写网页的时候，发现一个小问题，同一张图片，我用不同的浏览器打开的效果竟然是不一样的
具体情况如下
代码部分
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background-image: url(images/NEKOPARA_CHRONICLE_0076.jpg);
background-repeat: no-repeat;
background-size: 100vw 100vh;
}
在edge浏览器下是这样的：
edge
非常正常
而放到我的星愿浏览器下就不一样了
星愿/IE
图片横过来了？？？
用IE浏览器试了试，发现跟星愿浏览器一样，也是会横过来。
而用电脑查看这张图片的属性时，长宽像素数值也正确
属性
其实到这一步，我已经不知道怎么往下搞了，但是，之前在网上了解过，图片的详细属性会保存在exif信息里，于是抱着试试的想法，查看了一下这张图片的exif信息
exif
此时，我发现了问题的所在，这张图片的有一个“Rotate 90 CW”属性，这个属性是什么意思呢？
意思就是要顺时针方向（ClockWise）旋转90度。
有了这个线索，再去查找为什么图片会横置就很简单了，经过查询，发现，这是浏览器中广泛存在的一个bug，包括但不限于 Safari 4/5,Firefox 3.x,Opera 10.63,IE 8.0(数据不保证时效性，数据来源56845 - EXIF orientation is ignored - chromium
)
但是既然edge浏览器能正常显示，就说明微软已经修复了这个bug，但是同样使用chrome内核的星愿浏览器为什么不能正常显示呢？
查阅资料后得到：这个bug是微软从Chrome 81开始(在5/13/20稳定)，才更新的，更新说明如下图：
（信息来源Support for CSS image-orientation property - Chrome Platform Status (chromestatus.com)）
而当时，我的星愿浏览器是7.x版本的，当时使用的是Chromium 80.0.3987.159（现在最新版本已经升级到Chromium: 98.0.4758.139了）
之后去把浏览器升级了一下，果然解决了问题
至此，问题已经解决了，但是又产生了一个小问题：如果在非chrome内核的浏览器中，如何解决这个问题呢？
笔者下去稍微了解了一下，有Exif.js一个JavaScript库，主要用于从图像文件中读取 Exif信息。你可以在浏览器中的图像上使用它，可以从图像或文件输入元素中使用。同时检索EXIF和IPTC元数据。
具体如何使用，还请各位有兴趣的下去自行了解一下啦~
网友评论