iOS混合应用HTML图片上传：拍照后Firebase存储图片旋转问题求助

嘿，这两个问题我都在iOS混合开发里碰到过，给你详细的解决方案：

这个问题的根源是iOS相机拍摄的照片会在EXIF元数据中记录拍摄方向，但WebView的File对象不会自动纠正这个方向，Firebase Storage存储的是原始像素数据，而大多数图片查看器/浏览器不会自动读取EXIF方向来旋转图片，所以就出现了显示旋转的情况。

解决思路是在上传前用JavaScript读取图片的EXIF方向，通过Canvas纠正像素方向，再将处理后的Blob上传到Firebase。具体步骤如下：

1. 读取EXIF方向信息：可以用轻量的exif-js库来快速获取（你可以直接在项目中引入这个库）。
2. 根据方向旋转图片：创建Canvas，将图片绘制到Canvas时根据EXIF方向进行旋转/翻转，确保像素是正确的方向。
3. 上传处理后的文件：将Canvas导出为Blob，替换原始File对象上传到Firebase。

下面是完整的代码示例：

// 监听文件选择事件
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  // 获取图片的EXIF方向
  const orientation = await getImageOrientation(file);
  // 纠正图片方向
  const correctedFile = await fixImageRotation(file, orientation);
  // 上传到Firebase Storage
  const storageRef = firebase.storage().ref(`photos/${file.name}`);
  const snapshot = await storageRef.put(correctedFile);
  
  console.log('上传完成', snapshot.ref.getDownloadURL());
});

// 辅助函数：获取EXIF方向
function getImageOrientation(file) {
  return new Promise((resolve) => {
    EXIF.getData(file, function() {
      // Orientation的默认值是1（正常方向）
      const orientation = EXIF.getTag(this, 'Orientation');
      resolve(orientation || 1);
    });
  });
}

// 辅助函数：纠正图片旋转
function fixImageRotation(file, orientation) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      let canvasWidth = img.width;
      let canvasHeight = img.height;

      // 根据EXIF方向设置Canvas的旋转和尺寸
      switch(orientation) {
        case 2: // 水平翻转
          ctx.translate(img.width, 0);
          ctx.scale(-1, 1);
          break;
        case 3: // 旋转180度
          ctx.translate(img.width, img.height);
          ctx.rotate(Math.PI);
          break;
        case 4: // 垂直翻转
          ctx.translate(0, img.height);
          ctx.scale(1, -1);
          break;
        case 6: // 顺时针旋转90度
          canvasWidth = img.height;
          canvasHeight = img.width;
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -canvasWidth);
          break;
        case 8: // 逆时针旋转90度
          canvasWidth = img.height;
          canvasHeight = img.width;
          ctx.rotate(-Math.PI / 2);
          ctx.translate(-canvasHeight, 0);
          break;
        // 其他方向（5、7）是翻转+旋转，这里简化处理，你可以根据需要补充
        default:
          break;
      }

      // 设置Canvas尺寸
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      // 绘制纠正后的图片
      ctx.drawImage(img, 0, 0);

      // 导出为Blob，并保留原始文件的名称和类型
      canvas.toBlob((blob) => {
        const correctedFile = new File([blob], file.name, { type: file.type });
        resolve(correctedFile);
      }, file.type);
    };
    // 加载图片
    img.src = URL.createObjectURL(file);
  });
}

如果不想引入第三方库，也可以用原生的ImageBitmap结合一些EXIF解析逻辑，但exif-js已经足够轻量且稳定，是比较省心的选择。

要去掉iOS WebView中“拍摄新照片”的选项，只需要给input标签添加capture="none"属性即可。修改后的HTML代码：

<input type="file" accept="image/*" capture="none">

capture="none"的作用是告诉浏览器不要调用摄像头，仅允许从本地文件系统选择文件。在iOS 11及以上版本的WebView中，这个属性可以完美生效，点击控件后只会弹出相册选择界面，不会出现拍照选项。

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