如何减少 React Native 中的图像文件大小？

Question

我正在使用带有 react-native-image-picker 的 react native

当我加载照片（通过使用 showCameraRoll 功能）时，图像尺寸太大。 大小为 4032 x 3024，总图像大小超过 3MB。

但我想让大小小于 1024 * 1024 和 900KB。 我应该怎么办？

这是我的代码

    import {launchImageLibrary} from 'react-native-image-picker';


    const Upload = ({navigation}) => {
    
      const options = {
        title: 'Load Photo',
        customButtons: [
          {name: 'button_id_1', title: 'CustomButton 1'},
          {name: 'button_id_2', title: 'CustomButton 2'},
        ],
        storageOptions: {
          skipBackup: true,
          path: 'images',
        },
      };


      const showCameraRoll = () => {
        launchImageLibrary(options, (response) => {
          if (response.error) {
          } else {
            setImageSource(response.uri);
          }
          const form = new FormData();
          form.append('image', {
            name: 'SampleFile.jpg', // Whatever your filename is
            uri: response.uri, //  file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
            type: 'image/jpg', // video/mp4 for videos..or image/png etc...
          });

      };

我该如何修复我的代码以解决这个问题？

Answer 1

react-native-image-picker库有maxWidth和maxHeight选项。

选项 - React Native Image Picker

根据库的文档，这些选项正在调整所选图像的大小。

您还可以使用quality选项来减小文件大小。

您可以像这样添加这些选项：

const options = {
  maxWidth: 1024,
  maxHeight: 1024,
  quality: 0.9,
  title: 'Load Photo',
  customButtons: [
    {name: 'button_id_1', title: 'CustomButton 1'},
    {name: 'button_id_2', title: 'CustomButton 2'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};