React/Next.js项目iPhone端上传图片自动逆时针旋转90度如何解决

iPhone拍摄的图片会在EXIF元数据中写入Orientation方向标记，竖拍照片的该标记值通常为6，对应需要顺时针旋转90度才能正常显示。大部分安卓设备、PC端生成的图片会直接把像素按正确方向存储，EXIF方向值默认是1，所以不会出问题。如果上传链路中没有读取并应用这个EXIF方向标记，直接按原始像素流存储、渲染，就会出现图片逆时针旋转90度的异常。

方案1：前端上传前预处理（推荐，无服务端额外开销） #

核心逻辑是在浏览器端读取上传图片的EXIF方向值，用Canvas完成像素级旋转校正后，再把校正后的文件提交到服务端，从源头上避免旋转问题。

• 注意：如果使用Next.js App Router，该逻辑需要放在客户端组件中，顶部加'use client'标记，Canvas、File API都是浏览器专属API，无法在服务端组件中直接运行。
• 核心实现代码参考：

// 客户端上传处理逻辑
const processImageBeforeUpload = async (file: File): Promise<File> => {
  // 读取EXIF方向值，可自行实现解析逻辑或使用成熟轻量库的封装方法
  const orientation = await getExifOrientation(file)
  // 加载原始图片到Image实例
  const img = await loadImageFromFile(file)

  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 方向值为5/6/7/8时图片需要旋转，宽高互换
  if ([5, 6, 7, 8].includes(orientation)) {
    canvas.width = img.height
    canvas.height = img.width
  } else {
    canvas.width = img.width
    canvas.height = img.height
  }

  // 根据方向值做对应矩阵变换
  switch (orientation) {
    case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break
    case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break
    case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break
    case 5: ctx.transform(0, 1, 1, 0, 0, 0); break
    case 6: ctx.transform(0, 1, -1, 0, img.height, 0); break // 对应逆时针转90度的常见场景
    case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break
    case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break
    default: ctx.transform(1, 0, 0, 1, 0, 0)
  }

  ctx.drawImage(img, 0, 0)
  // 转换为校正后的File对象
  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      const correctedFile = new File([blob], file.name, { type: file.type })
      resolve(correctedFile)
    }, file.type, 0.92)
  })
}

其中getExifOrientation、loadImageFromFile为基础工具方法，不想从零实现EXIF解析逻辑的话，可以直接使用成熟的轻量前端图片处理库提供的封装能力，避免踩字节序、字段偏移的兼容坑。

方案2：服务端统一校正 #

如果不想在前端增加处理逻辑，可以在Next.js的服务端接口（Route Handler/Server Action）收到上传文件后，自动读取EXIF信息完成校正。Next.js底层图片优化能力依赖的sharp库就原生支持自动按EXIF方向旋转，不需要额外引入重型依赖。
核心实现代码参考：

// app/api/upload/route.ts
import sharp from 'sharp'

export async function POST(req: Request) {
  const formData = await req.formData()
  const uploadFile = formData.get('image') as File
  const fileBuffer = Buffer.from(await uploadFile.arrayBuffer())

  // rotate()不传参数时会自动读取EXIF方向完成校正，校正后自动移除EXIF方向标记
  const correctedImageBuffer = await sharp(fileBuffer)
    .rotate()
    .toBuffer()
  
  // 后续将correctedImageBuffer存入对象存储/本地存储即可
  return Response.json({ code: 0, msg: '上传成功' })
}

• 不要只用CSStransform: rotate()做视觉层面的旋转修正，这种方式只是修改了前端展示效果，实际存储的图片像素还是错位的，其他端（PC、安卓等）拉取图片时依然会显示旋转异常。
• 校正完成后建议将图片的EXIF Orientation字段重置为1（标准正向），避免后续不同平台读取图片时重复应用旋转规则。
• 校正后的图片使用next/image渲染时，不要额外加旋转类名，避免出现二次旋转的问题。

内容的提问来源于stack exchange，提问作者herbie