就像下面这张图一样,一眼过去就知道:宽<高。
但是为什么用 exiftool 看的时候显示却怪怪的?
1 2 3 4 5 |
|
插曲:本来是准备拿当前页面上显示的图片为例子说明为什么图片显示正确/错误了。然后马上醒悟到:我马上就会改掉这个 bug/feature。这会导致文章不匹配。于是决定不写这段了。
结论:相机📷在为了拍照时更快速地存储图片,不管是横拍还是竖拍,都会以同样的数据存储。只是再加了一个 Orientation
元数据字段表示图片应该如何旋转后才能作为最终的展示图片。
结论2:经过一些转换工具转换后,可能会有一个 Rotation
元数据,意义和 Orientation
非常相似,也是表示“旋转”。
上面这张图的结果如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
其中的 CW
我猜是 ClockWise(顺时针) 的缩写,意即最终需要顺时针旋转 90°.
那么问题来了,我这张照片肉眼来说不是“挺正”的吗?
可能的 Orientation 值
值 | 名称 | 说明 | 显示方向 |
---|---|---|---|
1 | Horizontal (normal) | 正常方向,无需旋转 | 🔼 顶部朝上 |
2 | Mirror horizontal | 水平翻转 | 🔁 左右颠倒 |
3 | Rotate 180 | 顺时针或逆时针旋转 180° | 🔽 顶部变底部 |
4 | Mirror vertical | 垂直翻转 | ↕️ 上下颠倒 |
5 | Mirror horizontal and rotate 270 CW | 水平翻转后顺时针旋转 270°(等于左旋90°+镜像) | ↙️ |
6 | Rotate 90 CW | 顺时针旋转 90° | ▶️ |
7 | Mirror horizontal and rotate 90 CW | 水平翻转后顺时针旋转 90° | ↗️ |
8 | Rotate 270 CW | 顺时针旋转 270°(等于逆时针 90°) | ◀️ |
2025-4-17 00:52:05
看起来 Orientation
和 Rotation
有点费解🫤:
1 2 3 4 5 6 |
|
同一张图片一个是顺时针旋转90度,一个是顺时针旋转270度(逆时针旋转90度)。这两个不是上下颠倒了吗?
2025-4-17 01:27:03
吓尿了简直:
- EXIF orientation handling is a ghetto | Dave Perrett
- recurser/exif-orientation-examples: Example images for the various EXIF orientation flags, in both landscape and portrait orientation.
2025-4-17 01:41:29
尝试把设置 image-orientation: none
1 后,图片向左旋转了 90°;所以大概可以暂时不管 Rotation
的值?🤔
2025-4-18 00:59:27
鉴于浏览器能正常渲染并设置尺寸的图片。说明 img.natureWidth
2 和 img.natureHeight
很可靠。那么,就让浏览器来帮这个忙了。 参考:/admin/statics/editor.js。但是要注意:这个单位是 CSS 像素。