如何基于EXIF数据修改Firebase Storage中已上传图片的方向？

嘿，我来帮你搞定这个问题！既然你已经把图片传到Firebase Storage，而且清楚图片带了EXIF方向数据，其实有两种靠谱的方案来调整图片方向，我给你详细拆解下：

这种方式适合需要在用户上传后马上纠正方向的场景，步骤如下：

• 从Firebase Storage把目标图片下载到客户端（浏览器/移动端）
• 用专门的库读取图片的EXIF方向标签（比如浏览器端用exif-js，移动端用对应平台的原生API）
• 根据EXIF返回的方向值（1到8对应不同的旋转/翻转状态），用画布（Canvas）或者原生图片处理API纠正图片方向
• 把纠正后的图片重新上传到Firebase Storage（可以选择覆盖原文件，或者上传到新路径）

给你一个浏览器端的代码示例：

// 1. 从Firebase Storage获取图片下载链接
const storageRef = firebase.storage().ref('your-target-image.jpg');
storageRef.getDownloadURL().then(url => {
  const img = new Image();
  // 处理跨域问题
  img.crossOrigin = 'anonymous';
  img.onload = () => {
    // 2. 读取EXIF方向信息
    EXIF.getData(img, function() {
      const orientation = EXIF.getTag(this, 'Orientation');
      // 3. 创建画布并根据方向纠正图片
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 根据不同的EXIF方向值调整绘制逻辑
      switch(orientation) {
        case 2: // 水平翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.scale(-1, 1);
          ctx.drawImage(img, -img.width, 0);
          break;
        case 3: // 旋转180度
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.rotate(Math.PI);
          ctx.drawImage(img, -img.width, -img.height);
          break;
        case 4: // 垂直翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.scale(1, -1);
          ctx.drawImage(img, 0, -img.height);
          break;
        case 5: // 顺时针旋转90度+水平翻转
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(-1, 1);
          ctx.drawImage(img, -img.height, 0);
          break;
        case 6: // 顺时针旋转90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.drawImage(img, 0, -img.width);
          break;
        case 7: // 顺时针旋转90度+垂直翻转
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(1, -1);
          ctx.drawImage(img, img.height, -img.width);
          break;
        case 8: // 逆时针旋转90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(-0.5 * Math.PI);
          ctx.drawImage(img, -img.width, 0);
          break;
        default: // 正常方向
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
      }
      
      // 4. 将画布转为Blob并重新上传
      canvas.toBlob(blob => {
        storageRef.put(blob).then(() => {
          console.log('图片方向已纠正并重新上传完成！');
        });
      }, 'image/jpeg', 0.9);
    });
  };
  img.src = url;
});

注：这里用到了exif-js库，你可以直接在项目里安装引入它来读取EXIF数据。

如果是批量处理已有图片，或者希望上传后自动纠正方向，推荐用Firebase Cloud Functions在服务端处理，步骤如下：

• 部署一个Cloud Function，监听Storage的文件上传事件（或者手动触发处理已有文件）
• 在函数里把目标图片下载到临时目录
• 用sharp（Node.js生态里常用的高性能图片处理库）自动识别EXIF方向并纠正，同时可以移除EXIF数据避免后续重复处理
• 把处理后的图片重新上传回Storage

给你一个Node.js的Cloud Functions示例：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const sharp = require("sharp");
const os = require("os");
const path = require("path");
const fs = require("fs");

admin.initializeApp();

// 监听图片上传事件，自动纠正方向
exports.fixImageOrientation = functions.storage.object().onFinalize(async (object) => {
  const fileBucket = object.bucket;
  const filePath = object.name;
  const fileName = path.basename(filePath);
  
  // 过滤非图片文件，避免无效处理
  if (!fileName.match(/\.(jpg|jpeg|png)$/i)) {
    functions.logger.log('不是目标图片格式，跳过处理');
    return null;
  }

  const bucket = admin.storage().bucket(fileBucket);
  const tempFilePath = path.join(os.tmpdir(), fileName);
  
  // 1. 下载图片到临时目录
  await bucket.file(filePath).download({ destination: tempFilePath });
  functions.logger.log('文件已下载到临时目录:', tempFilePath);
  
  // 2. 用sharp自动纠正方向，并移除EXIF元数据
  await sharp(tempFilePath)
    .rotate() // 自动识别EXIF方向并旋转图片
    .withoutMetadata() // 移除EXIF，防止后续读取到旧的方向信息
    .toFile(tempFilePath + '-fixed');
  
  // 3. 上传处理后的图片回Storage（这里选择上传到新路径，也可以直接覆盖原文件）
  const fixedFilePath = filePath.replace(fileName, `fixed-${fileName}`);
  await bucket.upload(tempFilePath + '-fixed', {
    destination: fixedFilePath,
    metadata: {
      contentType: object.contentType
    }
  });
  
  functions.logger.log('图片方向处理完成，已上传至:', fixedFilePath);
  
  // 清理临时文件
  fs.unlinkSync(tempFilePath);
  fs.unlinkSync(tempFilePath + '-fixed');
  return null;
});

注：部署前需要在Cloud Functions项目里安装依赖：npm install firebase-admin firebase-functions sharp，部署后新上传的图片会自动被处理，已有图片可以通过手动触发函数来批量处理。

• 如果选择覆盖原文件，要确保你的Storage权限设置允许修改操作，避免上传失败
• 处理大尺寸图片时，客户端方案可能存在性能瓶颈，优先选择服务端Cloud Functions
• sharp库在Cloud Functions环境中需要注意Node.js版本兼容性，建议使用官方推荐的版本

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