Fancybox影像方向 [英] Fancybox image orientation

查看:95
本文介绍了Fancybox影像方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的网站上设置了fancyapps-fancyBox-18d1712,并且纵向图像的帧显示是错误的(它们以横向模式显示).如果从人像模式图像的框架中选择图像URL,并将其加载到新的浏览器选项卡中,则图像的方向正确.在Ubuntu上的Firefox,OSX上的Chrome,OSX上的Maxthon和OSX上的Safari中,行为是相同的.

请告知.谢谢.

解决方案

好吧,这不是fancybox的问题.有一个叫做JPEG EXIF Orientation Tag(或标志)的东西.

大多数现代相机将此flag添加到图像的 EXIF 信息中,某些桌面软件以及某些现代浏览器(肯定是移动浏览器)都可以读取此标志并旋转图像(视觉上),无论实际的图像格式(人像/风景)如何,都可以正确显示它.

作为参考, irfanview 可以读取此标志(如果有)

启用/禁用此选项将相应显示图像.

您需要做的是在不读取EXIF信息的情况下编辑图像,而无需手动旋转图像或保存它们而没有任何EXIF信息(在任何情况下都应手动旋转图像.)然后,您必须将其重新上传到您的服务器.

这听起来很烦人,但这是确保图像格式在所有不同浏览器和平台上保持一致的唯一方法(您不会是对此问题首见的人,请检查,以作进一步参考. >

I have setup fancyapps-fancyBox-18d1712 on my website, and the frame display of portrait oriented images is wrong (they show up in landscape mode). If I select the image url from the frame for a portrait mode image and load it in a new browser tab, the image is correctly oriented. The behavior is the same in Firefox on Ubuntu, Chrome on OSX, Maxthon on OSX, and Safari on OSX.

Please advise. Thanks.

解决方案

Well, it's not a fancybox issue. There is something called JPEG EXIF Orientation Tag (or flag).

Most modern cameras add this flag to the image's EXIF information and some desktop software as well as some modern browsers (mobile browsers for sure) are able to read this flag and rotate the image (visually speaking) to display it properly, regardless the actual image format (portrait/landscape).

For reference, irfanview has an option that reads this flag if available

Enabling/disabling this option will display the image accordingly.

What you have to do is edit your images without reading the EXIF information and rotate them manually or save them without any EXIF information at all (you should rotate them manually in any case.) Then, you have to upload them again to your server.

It sounds annoying but it's the only way you can make sure that your images' format will be consistent through all different browsers and platforms (you wouldn't be the first person ranting about the issue, check this blog article)

You may also want to check this for further reference.

这篇关于Fancybox影像方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆