如何在本机反应中减小图像文件大小？

Posted 2023-05-07

【中文标题】如何在本机反应中减小图像文件大小？

【英文标题】：How can I reduce the image file size in react native?

【发布时间】：2021-10-03 19:03:24

【问题描述】：

我正在使用带有 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...
          );

      ;

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

【问题讨论】：

The size is 4032 x 3024 你的意思是分辨率

【参考方案1】：

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

Options - 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',
  ,
;

【讨论】：

我修改了我的问题，但我应该把你的代码放在哪里？？

@jackvolten 在您的options 对象中