【React Native（Expo）】expo-image-manipulatorを使って画像サイズの適正化を行う

◆やりたいこと

• Firebaseやsupabaseなどに画像をアップロードする際にファイルサイズを適正化してアップロードしたい
• 背景としてスマホ撮影の画像サイズが数M単位となりアップロード先のストレージを圧迫させるため

◆記事にしようと思ったきっかけ

• Expo公式ドキュメントでは「ImageManipulator.manipulateAsync」が
  現在非推奨となっており、代替として
  「mageManipulator.manipulate」か
  「useImageManipulator」を使用を促してます。
  

• Qiitaでもexpo-image-manipulatorに関する記事はあるのですが、「ImageManipulator.manipulateAsync」を使っての実装だったので、非推奨でない方法での適正化を行う方法で記事を作成したいと思いました。

• 今回は代替の1つであるmageManipulator.manipulate」を使って画像サイズ適正化

環境（本記事のライブラリのバージョン）

Expo：52.0.36
react-native：0.76.7
expo-image-manipulator：3.0.6

◆実装例

image.ts

import { SaveFormat, ImageManipulator } from "expo-image-manipulator"

const uri = "アップロードしたい画像のURI" 

const processImage = async (uri: string) => {
    // manipulateメソッドに画像のURIを渡すことで、画像操作コンテキストを作成します
    const manipulator = ImageManipulator.manipulate(uri)

    // 画像のサイズを調整して品質を最適化
    // 今回の例では画像の幅を1080ピクセルに設定
    manipulator.resize({
        width: 1080
    })

    // 画像を描画
    // リサイズ処理を実際に適用し、結果を取得します。
    const resizeImage = await manipulator.renderAsync()

    // 今回の例ではBase64形式で保存処理を実施。
    // format: 保存形式（JPEG/PNG/WEBP）
    // compress: 圧縮率（0.8は80%の品質（20%の圧縮））
    // base64: Base64エンコーディングを有効にする（trueに設定）
    const result = await resizeImage.saveAsync({
        format: SaveFormat.JPEG,
        compress: 0.8,
        base64: true
    })
}

こちらのやり方を適用して、ファイルサイズの適正化を行うことに成功したので、
備忘録としてこちらに記事を書かせていただきました。

当方、初の記事となるため、
もし不備な点などありましたらご指摘ください。
今後も、実装したところで、記事にしたほうが良いと思ったものは
逐次OUTPUTとして記事に上げようと思います。

参考情報