Rorkアプリの写真が、アップロードした先でだけ横向きになる——EXIF Orientation の正規化と位置情報メタデータの削除

import * as ImagePicker from 'expo-image-picker';
 
// 選択した画像の EXIF Orientation を確認するための診断用ヘルパー
async function pickAndInspect() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    exif: true,          // EXIF を取得する（既定では付いてこない）
    quality: 1,
  });
  if (result.canceled) return;
 
  const asset = result.assets[0];
  // iOS は "Orientation"、Android では文字列キーが異なる場合がある
  const orientation =
    asset.exif?.Orientation ?? asset.exif?.['{TIFF}']?.Orientation ?? 1;
 
  console.log('orientation =', orientation); // 縦持ち写真ならよく 6 が出る
  console.log('size =', asset.width, 'x', asset.height);
  return asset;
}

import * as ImageManipulator from 'expo-image-manipulator';
 
// 写真を「正位置のピクセル」に焼き直し、EXIF を落とした JPEG を返す
async function normalizeForUpload(uri: string) {
  const manipulated = await ImageManipulator.manipulateAsync(
    uri,
    [],                       // 変形リストは空でよい — 再エンコード自体が正規化になる
    {
      compress: 0.8,          // 0〜1。0.8 で見た目の劣化はほぼ気づきません
      format: ImageManipulator.SaveFormat.JPEG,
    }
  );
  // manipulated.uri は Orientation=1・EXIF なしの新しいファイルを指す
  return manipulated;
}

import * as ImageManipulator from 'expo-image-manipulator';
import * as FileSystem from 'expo-file-system';
 
// 正規化＋検証: 出力後に元と新しいファイルのサイズを比べてログに残す
async function safeProcess(originalUri: string) {
  const before = await FileSystem.getInfoAsync(originalUri, { size: true });
 
  const out = await ImageManipulator.manipulateAsync(
    originalUri,
    [{ resize: { width: 1600 } }],   // 長辺を 1600px に。投稿用途ならこれで十分
    { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
  );
 
  const after = await FileSystem.getInfoAsync(out.uri, { size: true });
  const ratio = (1 - (after.size ?? 0) / (before.size ?? 1)) * 100;
  console.log(`size: ${before.size} -> ${after.size} bytes (-${ratio.toFixed(0)}%)`);
  // 出力 JPEG をビューアで開き、位置情報フィールドが空であることを目視確認する
  return out.uri;
}

async function uploadPhoto(pickedUri: string, endpoint: string) {
  // 1) どの経路から来た画像でも、ここで必ず正規化する
  const safeUri = await safeProcess(pickedUri);
 
  // 2) 正位置・EXIF なしのファイルだけをサーバーへ送る
  const form = new FormData();
  form.append('file', {
    uri: safeUri,
    name: 'photo.jpg',
    type: 'image/jpeg',
  } as any);
 
  const res = await fetch(endpoint, { method: 'POST', body: form });
  if (!res.ok) throw new Error(`upload failed: ${res.status}`);
  return res.json();
}