ios 拍摄的竖屏照片因 exif 中的 orientation 元数据未被正确处理，导致上传后显示为横屏；本文详解如何通过 sharp 库在服务端自动校正图像方向，确保跨设备一致展示。
ios 拍摄的竖屏照片因 exif 中的 orientation 元数据未被正确处理，导致上传后显示为横屏；本文详解如何通过 sharp 库在服务端自动校正图像方向，确保跨设备一致展示。
在构建 B2B 车辆交易平台时，我们发现一个典型且隐蔽的兼容性问题：用户使用 iOS 设备（无论是从相册选取还是直接拍照）上传的竖屏车辆照片，在前端预览阶段显示正常，但上传至服务器并再次加载时却意外变为横屏——图像内容被逆时针旋转 90° 或镜像翻转，严重破坏表单体验与专业形象。
根本原因并非前端渲染逻辑错误，而是 iOS 系统为节省资源，默认以传感器原始方向（通常为横屏）保存 JPEG 图像，并将真实的拍摄朝向记录在 EXIF 的 Orientation 标签中（如值为 6 表示“旋转 90° 顺时针”，即竖屏拍摄）。Android 和桌面浏览器通常自动读取并应用该元数据，而许多服务端图像处理库（包括早期配置的 Sharp）默认忽略或丢弃 Orientation 信息，导致缩略图生成、格式转换（如转 WebP）后丢失方向语义，最终呈现为未校正的原始像素布局。
关键解决方案：在 Sharp 处理链中显式调用 .rotate()
Sharp 提供了智能方向校正能力：当启用 .rotate() 且不传参时，它会自动读取输入图像 EXIF 中的 Orientation 字段，并执行对应旋转+翻转操作，同时清除已应用的 Orientation 标签，输出标准化的、方向正确的图像。这正是解决本问题的核心步骤。
✅ 正确的服务端处理示例（Node.js + Express + Sharp）：
const sharp = require('sharp');
app.post('/api/upload', async (req, res) => {
const buffer = req.file.buffer;
try {
const processed = await sharp(buffer)
.rotate() // ? 关键：自动基于 EXIF Orientation 校正方向
.resize(1200, null, { withoutEnlargement: true })
.webp({ quality: 85 })
.toBuffer();
// 保存 processed 并返回 URL...
res.json({ success: true, url: '/uploads/photo.webp' });
} catch (err) {
res.status(500).json({ error: 'Image processing failed' });
}
});⚠️ 注意事项：
-
勿仅依赖
.withMetadata()：该方法仅保留 EXIF 数据，但不会应用 Orientation 校正，反而可能让下游系统重复解析导致二次错误； - 避免前端 JS 旋转：Canvas 或 FileReader 手动解析 EXIF 并旋转存在兼容性、性能与内存风险，且无法保障服务端后续处理的一致性；
- WebP 格式需注意：原生 WebP 不支持 EXIF Orientation，因此必须在校正后再转 WebP，否则方向信息将永久丢失；
- 测试覆盖场景：务必使用真实 iOS 设备拍摄的 JPEG（非截图、非编辑后图像）验证，因为截图通常无 Orientation 标签。
总结而言，该问题本质是移动端图像元数据与服务端处理流程的协同缺失。通过在 Sharp 流程中增加无参数 .rotate() 调用，即可实现零配置、高可靠的方向自动归一化。这一方案轻量、稳定、符合标准，已成功应用于生产环境，彻底消除 iOS 竖屏照片上传后的异常翻转现象。
