就像下面这张图一样,一眼过去就知道:宽<高。

但是为什么用 exiftool 看的时候显示却怪怪的?

1
2
3
4
5
$ exiftool -json -ImageSize IMG_0695.avif
[{
  "SourceFile": "IMG_0695.avif",
  "ImageSize": "4032x3024"
}]

插曲:本来是准备拿当前页面上显示的图片为例子说明为什么图片显示正确/错误了。然后马上醒悟到:我马上就会改掉这个 bug/feature。这会导致文章不匹配。于是决定不写这段了。

结论:相机📷在为了拍照时更快速地存储图片,不管是横拍还是竖拍,都会以同样的数据存储。只是再加了一个 Orientation 元数据字段表示图片应该如何旋转后才能作为最终的展示图片。

结论2:经过一些转换工具转换后,可能会有一个 Rotation 元数据,意义和 Orientation 非常相似,也是表示“旋转”。

上面这张图的结果如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$ exiftool -json -ImageSize -Orientation IMG_0695.avif
[{
  "SourceFile": "IMG_0695.avif",
  "ImageSize": "4032x3024",
  "Orientation": "Rotate 90 CW"
}]

$ exiftool -n -json -ImageSize -Orientation IMG_5912.heic
[{
  "SourceFile": "IMG_5912.heic",
  "ImageSize": "3213 5712",
  "Orientation": 1
}]

其中的 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

看起来 OrientationRotation 有点费解🫤:

1
2
3
4
5
6
$ exiftool -G -json -Orientation -Rotation 1.avif
[{
  "SourceFile": "1.avif",
  "EXIF:Orientation": "Rotate 90 CW",
  "QuickTime:Rotation": 270
}]

同一张图片一个是顺时针旋转90度,一个是顺时针旋转270度(逆时针旋转90度)。这两个不是上下颠倒了吗?

2025-4-17 01:27:03

吓尿了简直:

2025-4-17 01:41:29

尝试把设置 image-orientation: none1 后,图片向左旋转了 90°;所以大概可以暂时不管 Rotation 的值?🤔

2025-4-18 00:59:27

鉴于浏览器能正常渲染并设置尺寸的图片。说明 img.natureWidth2img.natureHeight 很可靠。那么,就让浏览器来帮这个忙了。 参考:/admin/statics/editor.js。但是要注意:这个单位是 CSS 像素。

碎碎念 桃子