如果存在 Exif 方向，浏览器图像上传会旋转

Question

我使用以下简单组件上传图像：

export function FileUploader({ file, setFile }) {

  // Handler for file selection
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];

    if (selectedFile) {
      setFile(selectedFile);
    }
  };

  return (
    <div>
      <input type="file" 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>
  );
}

如果上传的图像包含除 1 以外的 exif 方向（不旋转），则上传的图像数据会旋转，但会保留 exif 方向设置。这会导致图像在显示时被浏览器再次旋转。

例如，如果方向为3（水平翻转），则后端接收到的图像将被浏览器翻转，但exif仍会指示应再次翻转。

如果我在上传图像后手动从图像中删除 exif 方向，图像将正确显示。

是否有某种方法可以阻止浏览器（Chrome 和 Safari 的行为方式相同）旋转图像？

Answer 1

要解决浏览器再次旋转图像的问题，您可以使用 CSS 来阻止浏览器读取 EXIF 方向数据。

您可以使用：

样式={{ imageOrientation: '无' }}

将图像显示为时将其添加到图像标签

这应该可以解决浏览器再次旋转图像的问题。