如何避免Github在我的readme.md中旋转我的jpg图片？

Question

我已经在Github的readme.md中添加了一张图片引用。这张图片是一张竖向照片，但是当我在Github页面查看它时，图片被旋转了。

我尝试将仓库克隆到一个新位置，以确认图片确实仍然像预期的那样是竖向的。

readme.md中的图片部分：

Here is a picture of the hardware setup. ![picture of the hardware setup](HelloButtonModule.jpg)

这是受影响的 github 仓库

更新

现在我真的感到困惑了。我尝试在新仓库中简化问题，但图片像预期一样没有旋转。

更新

我创建了一个与图片完全相同的仓库，然后图片就被旋转了。

- steenhulthin

Answer 1

你可以尝试简单地打开文件并重新保存。在保存之前，您可能需要将其旋转360度，但这应该有效。

- A. William B. Allen

---

很疯狂，这对我也起作用了。使用Ubuntu的默认图像查看器，打开文件并使用“编辑”->“顺时针旋转”4次。提交此更改，推送到GitHub，现在GitHub自述文件中的图像已正确旋转。奇怪但有效！ - Pete Florence

GIMP似乎会自动注意到差异并询问您是否要修复它。只需打开，选择是，然后导出即可。 - Andrew Olney

Answer 2

如果你使用基于Debian的发行版，你可以使用exiftran。

sudo apt-get install exiftran
exiftran -ai *.jpg

这将根据图片的exif数据自动旋转所有.jpg文件。 我运行了。

git clone https://github.com/steenhulthin/HelloButtonModule/
cd HelloButtonModule/
exif HelloButtonModule.jpg

这样就产生了：

EXIF tags in 'HelloButtonModule.jpg' ('Motorola' byte order):
--------------------+----------------------------------------------------------
Tag                 |Value
--------------------+----------------------------------------------------------
Image Width         |4128
Image Length        |2322
Manufacturer        |SAMSUNG
Model               |GT-I9505
Orientation         |Top-left
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Software            |I9505XXUDMH8
Date and Time       |2013:10:16 23:22:57
YCbCr Positioning   |Centred
Image Width         |512
Image Length        |288
Compression         |JPEG compression
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Exposure Time       |1/33 sec.
F-Number            |f/2.2
Exposure Program    |Normal programme
ISO Speed Ratings   |100
Exif Version        |Exif Version 2.2
Date and Time (Origi|2013:10:16 23:22:57
Date and Time (Digit|2013:10:16 23:22:57
Components Configura|Y Cb Cr -
Shutter Speed       |5.06 EV (1/33 sec.)
Aperture            |2.28 EV (f/2.2)
Brightness          |2.44 EV (18.56 cd/m^2)
Exposure Bias       |0.00 EV
Maximum Aperture Val|2.28 EV (f/2.2)
Metering Mode       |Centre-weighted average
Light Source        |Unknown
Flash               |Flash did not fire
Focal Length        |4.2 mm
Maker Note          |98 bytes undefined data
User Comment        |METADATA-START
FlashPixVersion     |FlashPix Version 1.0
Colour Space        |sRGB
Pixel X Dimension   |4128
Pixel Y Dimension   |2322
Sensing Method      |One-chip colour area sensor

如您所见，方向标签显示为左上角。这意味着EXIF数据不会影响旋转，也就是说，图片在您的计算机和Github上看起来是一样的。

然后我运行了：

git clone https://github.com/steenhulthin/githubreadmeimagerotation2
cd githubreadmeimagerotation2/
exif HelloButtonModule.jpg

我得到了：

EXIF tags in 'HelloButtonModule.jpg' ('Intel' byte order):
--------------------+----------------------------------------------------------
Tag                 |Value
--------------------+----------------------------------------------------------
Image Width         |4128
Image Length        |2322
Manufacturer        |SAMSUNG
Model               |GT-I9505
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Software            |I9505XXUDMH8
Date and Time       |2013:10:16 23:22:57
YCbCr Positioning   |Centred
Image Width         |512
Image Length        |288
Compression         |JPEG compression
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Exposure Time       |1/33 sec.
F-Number            |f/2.2
Exposure Program    |Normal programme
ISO Speed Ratings   |100
Exif Version        |Exif Version 2.2
Date and Time (Origi|2013:10:16 23:22:57
Date and Time (Digit|2013:10:16 23:22:57
Components Configura|Y Cb Cr -
Shutter Speed       |5.06 EV (1/33 sec.)
Aperture            |2.28 EV (f/2.2)
Brightness          |2.44 EV (18.56 cd/m^2)
Exposure Bias       |0.00 EV
Maximum Aperture Val|2.28 EV (f/2.2)
Metering Mode       |Centre-weighted average
Light Source        |Unknown
Flash               |Flash did not fire
Focal Length        |4.2 mm
Maker Note          |98 bytes undefined data
User Comment        |METADATA-START
FlashPixVersion     |FlashPix Version 1.0
Colour Space        |sRGB
Pixel X Dimension   |4128
Pixel Y Dimension   |2322
Sensing Method      |One-chip colour area sensor

这里的方向指的是右上角，这意味着图像的右上角当前位于左上角。Github不支持此信息，因此您的图像显示不正确。

然后我运行了exiftran -ai HelloButtonModule.jpg，问题得到解决。这里有一个分支https://github.com/texasflood/githubreadmeimagerotation2，显示了图像的正确旋转方式。

如果您使用Windows系统，IrfanView可能会起作用，可以参考这个问题：https://superuser.com/questions/36645/how-to-rotate-images-automatically-based-on-exif-data。

- texasflood

---

旋转本身没有问题，只是在Github上显示的方式有误。 - steenhulthin

有的。我克隆了你的存储库并进行了检查。我认为你误解了。 - texasflood

Answer 3

我认为这是由于GitHub缺少对EXIF“方向”标签的支持所致。

Github将图像数据显示为它们包含在JPEG文件中的方式，这是它们被相机拍摄传感器捕获的方向。此外，JPEG文件包括一个EXIF标签“方向”，其中包含值“右，上”，表示不应按照原样解释图像数据，而实际上右侧应该朝上。显然，Github不遵守此标签。

您第二个存储库中的图像与第一个存储库中的图像不同，但似乎已经编辑以添加红色箭头和文本。我猜测编辑器在加载时解释了“方向”标记，然后以旋转形式保存了图像数据，并使用“顶部，左侧”的“方向”标记值。

有关更多信息，请参见例如JPEG旋转和EXIF方向。

- A. Donda

Answer 4

我仍然不明白为什么会发生这种情况（@A.Donda的解释听起来很有道理），但是我找到了一个解决方法。

我将图片缩小到原始大小的50%，现在图片不再旋转。

不过，如果还有其他的缩放方法，我也很乐意了解。

- steenhulthin