阻止浏览器根据 EXIF 信息自动修正图像旋转方向 image-orientation

CSS 属性 image-orientation 用来修正某些图片的预设方向。

当需要对图像原始状态进行操作时,这种自动修正会带来错误。尤其是在新版浏览器中该属性默认值从不生效(none)被改成了 from-image,此时导致在 Chrome v81 浏览器上处理一些带角度的图像时产出错误的信息。

/* 正确的默认值应该是0 */
image-orientation: 0deg /* 实际该值无效 */
image-orientation: none /* 实际该值生效,可以阻止浏览器自动旋转图像(disable html img auto rotation) */

/* 非 90 度的整数倍, 所以会被四舍五入到 0 度 */
image-orientation: 6.4deg

/* 相当于 270deg */
image-orientation: -90deg

/* 使用图片的 EXIF 数据 */
image-orientation: from-image

/* 旋转 90deg, 再水平翻转 */
image-orientation: 90deg flip

/* 不旋转, 只进行水平翻转 */
image-orientation: flip

/* 继承 */
image-orientation: inherit

该属性还未进入标准文档,在未来版本的浏览器中该功能的语法和行为可能随之改变。

作者: 袖之欢

科技改变生活,编程改变世界。

发表评论

电子邮件地址不会被公开。 必填项已用*标注