从 react-native expo 上传的图片太大且质量太差

Question

我正在构建一个应用程序，员工应该能够为网站的产品目录上传图片。该应用程序是使用 expo react-native 构建的，相机库是 ImagePicker，用于压缩和调整大小的库是 ImageManipulator。

检查一些也显示产品目录的网站，我看到500x300 周围的图像即使在文件大小在40kbreference 附近放大 200% 时看起来也很清晰。我使用 iphone XR 进行测试，它的相机在4032x3024 中拍摄图像，当我将其调整为与500x300 远程相似的东西时，即使没有压缩它看起来也很可怕，并且文件大小在压缩后超过250kb。 my image, download link

可能是由于大分辨率缩放、不良压缩还是我完全遗漏了什么？

我们正在根据图像的分辨率将图像上传到三个单独的 AWS 存储桶。 （代码上下文）

export default ({ takePictureCb, clothingId }) => {
  const dispatch = useDispatch();
  const { toast } = useToast();
  const quality = useSelector(selectQuality);

  const launchCamera = async () => {
    const image = await ImagePicker.launchCameraAsync({
      aspect: [1, 1],
      allowsEditing: true
    });
    if (image.cancelled === true) {
      return;
    }
    dispatch(setLoading(true));
    const resizedImages = await getResizedImages(image, [720, 500, 300]);
    Promise.all(resizedImages.map(resizedImage => sendImage(resizedImage)))
      .then(() => {
        toast({
          message: `The images are uploaded`,
          ...successProps
        });
      })
      .catch(error => {
        console.error(error);
        toast({
          message: `Something went wrong!`,
          ...errorProps
        });
      })
      .finally(() => {
        dispatch(setLoading(false));
        dispatch(removeClothing(clothingId));
        takePictureCb();
      });
  };

  const getResizedImages = async (image, pixels: number[]) => {
    const promises = pixels.map(pixels =>
      ImageManipulator.manipulateAsync(image.uri, [
        { resize: { height: pixels, width: pixels }, compress: quality }
      ])
    );
    return Promise.all(promises);
  };

  const sendImage = async image => {
    await uploadImage(clothingId, image.uri);
  };

  return <Button title="Open camera" onPress={launchCamera} />;
};

Answer 1

让结果 = 等待 ImagePicker.launchImageLibraryAsync({ 媒体类型：ImagePicker.MediaTypeOptions.All， 允许编辑：真， 方面：[4, 3]， 质量：1， });