Yohav Rn
Yohav Rn

Reputation: 209

Expo ImageManipulator SaveFormat increase the size of my images

With the camera I take a set of photo like this:

 const takePicture = useCallback(async () => {
    try {
      const picture = await camera.current.takePictureAsync({
        quality: 0.4,
        base64: false,
        exif: false,
        shutterSound: false,
        skipProcessing: true,
      });
      images.current[step].push(picture);
    } catch (error) {
      console.error('Error taking or manipulating picture:', error);
    }
  }, [step]);

Then when all the photos are taken and reviewed by the user, he send them like this:

const manipulateImage = async imageUri => {
    const convertedImage = await manipulateAsync(imageUri, [], { format: SaveFormat.WEBP });
    return convertedImage.uri;
  };

const handleSendScan = async () => {
    setLoading(true);
    try {
      const images = Object.values(updatedImages).flat();
      console.log('Number of images before processing:', images.length);

      const formData = new FormData();

      let totalSizeBeforeMB = 0;
      for (const image of images) {
        const response = await fetch(image.uri);
        const blob = await response.blob();
        totalSizeBeforeMB += blob.size / (1024 * 1024);
      }
      console.log('Total size before WebP conversion:', totalSizeBeforeMB.toFixed(2), 'MB');

      let imageCount = 0;
      let totalSizeAfterMB = 0;
      for (const [index, image] of images.entries()) {
        const convertedUri = await manipulateImage(image.uri);
        const convertedResponse = await fetch(convertedUri);
        const convertedBlob = await convertedResponse.blob();
        totalSizeAfterMB += convertedBlob.size / (1024 * 1024);

        formData.append('images', {
          uri: convertedUri,
          type: getFileMimeType(convertedUri),
          name: `photo_${index}.${getFileExtension(convertedUri)}`,
        });
        imageCount++;
      }
      console.log('Number of images appended to FormData:', imageCount);
      console.log('Total size after WebP conversion:', totalSizeAfterMB.toFixed(2), 'MB');

      const messageSent = await API.postSendScan(user._id, formData);
      if (messageSent.status === 201) {
        setLoading(false);
        navigation.navigate('Dashboard', { shouldRefresh: true });
      } else {
        setLoading(false);
        Alert.alert('Error', 'Failed to send images');
      }
    } catch (error) {
      console.error(error);
      setLoading(false);
      Alert.alert('Error', 'Failed to process or send images');
    } finally {
      await cleanCache();
      route.params.updatedImages = {
        close: [],
        open: [],
        topBottom: [],
        openAligners: [],
      };
    }
  };

The real function does not include every line to calculate and console.log the weight, I added them because the size of all the pictures seems to big and upon loggin the result I realize that it was because it was bigger. Here is how the log looks like:

Number of images before processing: 18
Total size before WebP conversion: 4.77 MB
Number of images appended to FormData: 18
Total size after WebP conversion: 11.00 MB

Am I doing something wrong, is it normal or is there properties about mobile phone that I'm not aware of?

Thank you.

Upvotes: 0

Views: 37

Answers (0)

Related Questions