以前紹介した「react-native-image-picker」ライブラリを使ってアルバムやカメラで撮影した画像をアップロードする前に、アプリ側でリサイズする機能を実装したので備忘録としてまとめ。
プロフィール画像の表示が遅いのを改善する際、そう言えばアップロードしている画像ってオリジナルサイズのままでは…？と思ったので追加しました。
使用したライブラリは「react-native-image-resizer」です。
GitHub のページはこちら。
GitHub – bamlab/react-native-image-resizer: 🗻 Resize local images with React Native
react-native-image-resizer
まずライブラリのインストールを行うため、下記を実行します。
npm install react-native-image-resizer --save npx pod-install // iOS アプリの場合は実行
インストールが完了したら、まず下記をインポートします。
import ImageResizer from 'react-native-image-resizer';
あとは、リサイズを行いたいタイミングで、下記を実行すればOKです。
必要なのは、元画像の URI です。
ImageResizer.createResizedImage([画像のURI], 1000, 1000, 'JPEG', 80, 0)
.then(response => {
console.log(response.uri)
// リサイズ後に実行したい処理を記述
})
.catch(error => {
console.log(error);
});
成功したら、then() が呼び出されるので、この中で画像アップロードなど、リサイズ後に実行したい処理を記述してください。
画像 URI 以外の引数についての説明を簡単にして行きます。
まず 1000 が指定されている 第 2、第 3引数は、maxWidth と maxHeight で、画像の最大の横幅と高さです。
画像をリサイズする場合、これを超えないようにリサイズしてくれるようです。
第 4引数は compressFormat で、これは Android 限定のオプションです。
こちらはリサイズ後の画像形式のはずです。私は JPEG にしました。
第 5引数は quality で画像の質です。
0～100 の間で指定できたので、私はちょっとだけ下げています。
最後が rotation で、画像を回転する角度です。
なお、iOSでは、この角度は 90度の倍数に制限されているらしく、自動で丸められるとのこと。
…画像の回転を行わない場合は、0 を指定しておけばOKです！
他にもオプションはありましたが、最低限これだけ指定しておけば大丈夫でした。
詳しくは、上の GitHub のページをご参照ください。
開発中のアプリのプロフィール画像の表示遅延がこれで解消されればいいのですが…しばらく様子を見たいと思います。
以上、React Native の「react-native-image-resizer」ライブラリを使って画像をリサイズする方法でした。
ご参考になれば幸いです。
