含Exif Orientation的浏览器图片上传后重复旋转问题

问题根源是后端已根据Exif的Orientation旋转图片，但未清除该标记，浏览器渲染时会再次依据标记旋转，导致显示异常。以下是两种可行的解决方法：

前端上传前修正（适配你的React组件） #

在上传前通过Canvas修正图片方向，并移除Exif的Orientation标记，确保传给后端的图片是已正确旋转且无冲突标记的文件。

步骤1：安装Exif读取库 #

使用轻量现代的exifr库读取图片Orientation：

npm install exifr

步骤2：修改React组件 #

更新FileUploader组件，添加图片方向修正逻辑：

import exifr from 'exifr';

export function FileUploader({ file, setFile }) {
  // 根据Orientation值旋转图片的工具函数
  const rotateImage = (img, orientation) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 根据Orientation设置画布尺寸和旋转角度
    switch (orientation) {
      case 2: // 水平翻转
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.translate(img.width, 0);
        ctx.scale(-1, 1);
        break;
      case 3: // 180度旋转
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.translate(img.width, img.height);
        ctx.rotate(Math.PI);
        break;
      case 4: // 垂直翻转
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.translate(0, img.height);
        ctx.scale(1, -1);
        break;
      case 5: // 顺时针90度+水平翻转
        canvas.width = img.height;
        canvas.height = img.width;
        ctx.rotate(0.5 * Math.PI);
        ctx.scale(1, -1);
        break;
      case 6: // 顺时针90度
        canvas.width = img.height;
        canvas.height = img.width;
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(0, -img.height);
        break;
      case 7: // 逆时针90度+水平翻转
        canvas.width = img.height;
        canvas.height = img.width;
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(img.width, -img.height);
        ctx.scale(-1, 1);
        break;
      case 8: // 逆时针90度
        canvas.width = img.height;
        canvas.height = img.width;
        ctx.rotate(-0.5 * Math.PI);
        ctx.translate(-img.width, 0);
        break;
      default: // Orientation=1，无需处理
        canvas.width = img.width;
        canvas.height = img.height;
    }
    
    // 绘制图片到画布
    ctx.drawImage(img, 0, 0);
    return canvas;
  };

  const handleFileChange = async (event) => {
    const selectedFile = event.target.files[0];
    if (!selectedFile) return;

    // 读取图片的Exif Orientation
    const orientation = await exifr.orientation(selectedFile);
    
    // 如果Orientation不是1，修正图片
    if (orientation && orientation !== 1) {
      const img = new Image();
      img.src = URL.createObjectURL(selectedFile);
      
      img.onload = () => {
        const correctedCanvas = rotateImage(img, orientation);
        // 将Canvas转为Blob，再转为File对象
        correctedCanvas.toBlob((blob) => {
          const correctedFile = new File([blob], selectedFile.name, {
            type: selectedFile.type,
            lastModified: Date.now()
          });
          setFile(correctedFile);
          URL.revokeObjectURL(img.src);
        }, selectedFile.type);
      };
    } else {
      // 无需修正，直接设置原文件
      setFile(selectedFile);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />

      {file && (
        <div>
          <p><strong>Selected File:</strong> {file.name}</p>
          <p><strong>File Type:</strong> {file.type}</p>
          <p><strong>File Size:</strong> {(file.size / 1024).toFixed(2)} KB</p>
        </div>
      )}
    </div>
  );
}

后端处理方案 #

如果有权限修改后端逻辑，在保存图片时完成两个操作：

• 根据Exif Orientation旋转图片到正确方向
• 将Exif中的Orientation字段设置为1（或直接移除该字段）

不同后端语言的实现思路：

• Python：使用Pillow库，旋转图片后用delete()移除Orientation字段
• Node.js：使用sharp库，旋转图片后清除Exif信息或重置Orientation
• PHP：使用ImageMagick或GD库处理旋转并修改Exif

这种方案能从根源解决所有上传场景的问题，无需前端额外处理。

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