web-dev-qa-db-ja.com

React Nativeで画像を最適化する方法

カメラでキャプチャした写真は大きすぎて、Reactネイティブで効率的にアップロードおよびダウンロードできません。

React NativeでPNG画像ファイルを圧縮するためのAPIまたはライブラリはありますか？

imagecompressionreact-native
8
Learner

https://github.com/bamlab/react-native-image-resizer は、ローカルイメージのサイズを変更するAPIを提供します。

以下を指定できます。

  • 最大寸法（アスペクト比を維持した状態）および
  • 出力品質（JPEGのみ）

[〜＃〜] api [〜＃〜]

import ImageResizer from 'react-native-image-resizer';

ImageResizer.createResizedImage(imageUri, newWidth, newHeight, compressFormat, quality).then((resizedImageUri) => {
  // resizeImageUri is the URI of the new image that can now be displayed, uploaded...
}).catch((err) => {
  // Oops, something went wrong. Check that the filename is correct and
  // inspect err to get more details.
});
6
Learner

画像のアップロードに react-native-image-picker を使用している場合は、maxWidth、maxHeight、または画像の品質を設定してサイズを縮小できます。

 const options = {
                    title: 'Select Picture',
                    storageOptions: {
                        skipBackup: true,
                        path: 'images',

                    },
                    maxWidth: 500,
                    maxHeight: 500,
                    quality: 0.5
                };
ImagePicker.showImagePicker(options, resolve, reject);
0
Shehzad Osama