📷

ReactNative(Expo)で画像をアップロードするときに、リサイズする方法

2021/07/08に公開

Firebase

React Native

Expo

tech

概要

スマホで撮影したオリジナルサイズの画像はとても大きいのでリサイズなどの処理を施す。
react-native-image-resizerなるものがあるが、
issue#89
で会話にあるように、Expoでは互換性等の問題が発生したりするため、
公式で提供している
imagemanipulator
を利用する

実装

exampleの通り、インストールする

$ expo install expo-image-manipulator

使用例

const resizeImage = async (imageUri: string, w: number, h: number) => {
  const result = await ImageManipulator.manipulateAsync(
    imageUri,
    // width or height のみの場合は、アスペクトを保持したままリサイズする
    [{ resize: { width: w, height: h } }],
    {
      compress: 1,
      format: ImageManipulator.SaveFormat.PNG,
    }
  );
  return result.uri;
};

ImageManipulator.manipulateAsyncを実行

- 第1引数に画像のuri
- 第2引数にaction(resize,rotate,flip,crop)
- 第3引数にsaveOptions(圧縮,拡張子,Base64設定)

を指定。

ちなみに

FireBaseにはこんな拡張機能もある

もしくはFireBaseのrule設定でアップロード画像の容量リミットなども設定すれば
より安心かもしれません。

概要

実装

ちなみに

Discussion