iOS 拍摄的竖屏照片因 EXIF 中的 Orientation 元数据未被正确处理，导致在 Web 端显示或上传后发生 90° 旋转；使用 Sharp 库的 rotate() 方法可自动依据 EXIF 修正方向，彻底解决该问题。
ios 拍摄的竖屏照片因 exif 中的 orientation 元数据未被正确处理，导致在 web 端显示或上传后发生 90° 旋转；使用 sharp 库的 `rotate()` 方法可自动依据 exif 修正方向，彻底解决该问题。
在构建 B2B 车辆交易平台（React 前端 + Node.js 后端）过程中，我们发现一个典型但易被忽视的兼容性问题：iOS 用户从相册选取或直接拍摄的竖屏照片，在表单中预览时方向正常（如截图1），但一旦上传、经后端处理并再次加载时，图像却意外变为横屏（如截图2），且该错误方向被持久化保存——而 Android 和桌面浏览器均无此现象。
根本原因在于 iOS 相机不旋转像素数据本身，而是通过 EXIF 的 Orientation 标签（值通常为 6）记录“应顺时针旋转 90° 才正确显示”。多数浏览器（如 Safari）会自动读取并应用该元数据进行渲染，因此前端 <img> 预览看似正常；但当图片经后端处理（如缩略图生成、格式转换）时，若未显式解析并应用 Orientation，原始像素将按未旋转状态被写入新文件，导致方向丢失。
我们最初误以为“未做任何图像处理”，实则后端使用了 sharp 进行 WebP 转换与缩略图生成。虽然 withMetadata() 可保留 EXIF，但保留 ≠ 应用——它只是把 Orientation 标签原样复制过去，而浏览器仍需依赖客户端渲染逻辑（不可靠且不一致）。真正有效的解法是：在 Sharp 处理流程中主动调用 .rotate()，让其根据 EXIF 自动旋转像素并重置 Orientation 为 1。
✅ 正确的 Sharp 处理示例（Node.js 后端）：
const sharp = require('sharp');
// 接收原始 Buffer 或文件流
const processedImage = await sharp(inputBuffer)
.rotate() // 关键：自动检测并应用 EXIF Orientation，重置元数据
.resize(800, 600, { fit: 'inside' })
.webp({ quality: 85 })
.toBuffer();
⚠️ 注意事项：
-
.rotate()必须在.resize()、.flatten()等可能影响像素布局的操作之前调用，否则旋转可能失效； - 若需保留原始 EXIF（如版权信息），可在
.rotate()后接.withMetadata({ orientation: true })显式重置方向标签； -
切勿尝试前端 JS 解析 EXIF 并 canvas 旋转——iOS Safari 对 canvas 2D 上下文的
imageOrientation支持不稳定，且增加首屏延迟与内存开销； - 强制 iOS 网页进入横屏模式（如
screen.orientation.lock('landscape')）不仅无效（Web API 权限受限且不被 Safari 完全支持），更违背用户体验原则，应彻底避免。
总结：该问题本质是图像元数据与像素数据分离导致的跨平台渲染差异。通过 Sharp 的 .rotate() 实现服务端标准化处理，既能一劳永逸修复方向异常，又能确保所有终端（包括微信内置浏览器、旧版 Safari）获得一致、正确的图像输出，是当前最健壮、零客户端侵入的生产级方案。
