[Bug] 图片上传后出现方向问题

[Dustin-Jiang]

见 https://dev.bit101.cn/gallery/800 ，其附图的预览图jpeg!low为横向画幅，而完整图片jpeg为竖向画幅。

需要进一步调查

目前问题可能：

• 上传时逻辑
• 云端编码时问题
• 原文件奇怪特性

[YDX-2147483647]

原理

1. 有些软件旋转图片时并不重排像素，而是修改 EXIF 中的 Orientation。

   似乎 iPhone 比较特别。Windows 的照片也如此。

2. CSS 有个image-orientation，默认from-image从 EXIF 决定。

3. *.jpeg!low丢失了所有 EXIF 元数据。

证据

根据原图的元数据，确实是 iPhone 11 拍的。并且确实full.jpeg有 EXIF，而low.jpeg完全丢了。

$ exiftool -Orientation full.jpeg
Orientation                     : Rotate 90 CW
$ exiftool -Orientation low.jpeg

用 ImageMagick 列出更原始的 EXIF

$ magick identify -format "%[EXIF:*]" full.jpeg
exif:ApertureValue=126503/50079
exif:BrightnessValue=23086/22087
exif:ColorSpace=65535,
exif:ComponentsConfiguration=...
exif:DateTime=2023:12:22 20:24:24
exif:DateTimeDigitized=2023:12:22 20:24:24
exif:DateTimeOriginal=2023:12:22 20:24:24
exif:DigitalZoomRatio=1512/1481
exif:ExifOffset=226,
exif:ExifVersion=0232
exif:ExposureBiasValue=0/1
exif:ExposureMode=0,
exif:ExposureProgram=2,
exif:ExposureTime=1/50
exif:Flash=16,
exif:FlashPixVersion=0100
exif:FNumber=12/5
exif:FocalLength=77/50
exif:FocalLengthIn35mmFilm=13,
exif:GPSAltitude=714530/16239
exif:GPSAltitudeRef=.
exif:GPSDateStamp=2023:12:22
exif:GPSDestBearing=664023/2048
exif:GPSDestBearingRef=T
exif:GPSHPositioningError=35/1
exif:GPSImgDirection=664023/2048
exif:GPSImgDirectionRef=T
exif:GPSInfo=2272,
exif:GPSLatitude=39/1,44/1,227/100
exif:GPSLatitudeRef=N
exif:GPSLongitude=116/1,10/1,241/100
exif:GPSLongitudeRef=E
exif:GPSSpeed=0/1
exif:GPSSpeedRef=K
exif:GPSTimeStamp=12/1,24/1,21/1
exif:LensMake=Apple
exif:LensModel=iPhone 11 back dual wide camera 1.54mm f/2.4
exif:LensSpecification=807365/524263, 807365/524263, 807365/524263, 807365/524263
exif:Make=Apple
exif:MakerNote=Apple iOS
exif:MeteringMode=5,
exif:Model=iPhone 11
exif:OffsetTime=+08:00
exif:OffsetTimeDigitized=+08:00
exif:OffsetTimeOriginal=+08:00
👇
exif:Orientation=6, 👈
👆
exif:PhotographicSensitivity=800,
exif:PixelXDimension=4032,
exif:PixelYDimension=3024,
exif:ResolutionUnit=2,
exif:SceneCaptureType=0,
exif:SceneType=.
exif:SensingMethod=2,
exif:ShutterSpeedValue=90600/16043
exif:Software=17.2
exif:SubjectArea=2015,
exif:SubSecTimeDigitized=944
exif:SubSecTimeOriginal=944
exif:thumbnail:Compression=6,
exif:thumbnail:JPEGInterchangeFormat=2676,
exif:thumbnail:JPEGInterchangeFormatLength=8176,
exif:thumbnail:ResolutionUnit=2,
exif:thumbnail:XResolution=72/1
exif:thumbnail:YResolution=72/1
exif:WhiteBalance=0,
exif:XResolution=72/1
exif:YCbCrPositioning=1,
exif:YResolution=72/1
$ magick identify -format "%[EXIF:*]" low.jpeg

此外，我用 mwe 的图制作了四个只有 EXIF Orientation 不同的图片，可以复现：测试图片朝向 - 话廊 | BIT101 (/gallery/1075)。

可能的解决方案

• 配置 COS 让保留一些 EXIF 元数据。

  直接问问客服？

• 上传前，如果发现 EXIF 有 Orientation，旋转后再上传。（在前端或后端都行）

  BIT101/src/views/GalleryEdit.vue

  Lines 35 to 47 in 67d4fa2

  	// 上传图片
  	const fileList = ref<UploadFileInfo[]>([])
  	const upload_url = store.api_url + "/upload/image";
  	const upload_head = {
  	'fake-cookie': store.fake_cookie
  	}
  	function UploadHandler({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) {
  	let res = (event.target as XMLHttpRequest);
  	let data = JSON.parse(res.response);
  	file.name = data.mid;
  	window.$message.success("上传成功OvO");
  	}

  https://github.com/BIT101-dev/BIT101-GO/blob/1e38673c08cb223c4faba8971c38613f843d5a6a/controller/image.go#L124-L147

  https://github.com/BIT101-dev/BIT101-GO/blob/1e38673c08cb223c4faba8971c38613f843d5a6a/controller/image.go#L85-L122

• 数据库中增加 orientation 字段，自己控制。

  https://github.com/BIT101-dev/BIT101-GO/blob/1e38673c08cb223c4faba8971c38613f843d5a6a/database/db.go#L60-L66

另外，EXIF 有些隐私数据，也许全清空比较好。

相关链接

• 灵依娘来包饺子了！ - 话廊 | BIT101 (/gallery/800)
• low.jpeg (*.jpeg!low)
• full.jpeg (*.jpeg)
• 我之前也遇到过类似问题，当时只是 work around 了。
• 数据万象 获取图片 EXIF-API 文档-文档中心-腾讯云（“该接口为付费服务，产生的费用将由数据万象收”，大概查了一下是“0.025元/GB”）