Converting local image uri to blob inflates initial image size

[marioharper]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 8.12.0
  Yarn: 1.7.0
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => 0.55.4

Description

Converting a local image to a blob using fetch results in different blob sizes depending on whether or not you've rendered an image to the screen.

If you get an image from the camera roll, then convert it to a blob, the value of blob.size is equal to the true size of the image. However, if you first render an image to the screen then get the image and convert it you will notice the value of blob.size increases.

I've noticed at least a 2x increase in blob size with all images.

Reproducible Demo

// Create new expo project
expo init AwesomeProject
cd AwesomeProject
npm start

Change App.js to:

import React from 'react';
import { Text, Image, CameraRoll, SafeAreaView } from 'react-native';

/**
 * Demo to show that a local image blob retrieved via `fetch` changes size depending on if an image was rendered.
 */
export default class App extends React.Component {
  state = {
    sizeBefore: 0,
    sizeAfter: 0,
    isImageVisible: false
  };

  componentDidMount = async () => {
    const sizeBefore = await this.getBlobSize();
    this.setState({
      sizeBefore
    });

    await this.showImage();

    const sizeAfter = await this.getBlobSize();
    this.setState({
      sizeAfter
    });
  };

  // Grabs first photo from camera roll, converts it to a blob, then returns its size.
  getBlobSize = async () => {
    const photos = await CameraRoll.getPhotos({ first: 1 });
    const uri = photos.edges[0].node.image.uri;

    const response = await fetch(uri);
    const blob = await response.blob();

    return blob.size;
  };

  showImage = () => this.setState({ isImageVisible: true });

  render() {
    return (
      <SafeAreaView style={{ flex: 1, alignItems: 'center' }}>
        <Text>Blob Size Before: {this.state.sizeBefore}</Text>
        <Text>Blob Size After: {this.state.sizeAfter}</Text>

        {this.state.isImageVisible && (
          <React.Fragment>
            <Text>
              Increased{' '}
              {(this.state.sizeAfter / this.state.sizeBefore).toFixed(2)}x its
              original size.
            </Text>
            <Image
              style={{ width: 200, height: 200 }}
              source={{
                uri:
                  'https://images.unsplash.com/photo-1539159887678-1980ebb75db3'
              }}
            />
          </React.Fragment>
        )}
      </SafeAreaView>
    );
  }
}

[marioharper]

Note: I could not replicate this on Android

[marioharper]

As a current workaround I am using react-native-fetch-blob since it seems their blob implementation doesn't result in size increases. However, I'd like to do this with react-native's native blob support and not depend on an additional 3rd party library.

[naorzr]

I've came across the same issue when uploading a FormData obj to the server (which doesn't come as surprise)
Same here, android works fine, ios not, any updates on this?

[paincher]

Is there any advance in this matter? Im facing the same problem of @naorzr, thats a great increase on the size of the image when is uploaded using formData and its only happening on ios.

Some one has any workaround? Could be upload the image in base64 but in that case i'll face also an increasing of size and what we really need is that the size is the same

[spaul03]

Guys, any update on how to control increase in image size while uploading a FormData obj to the server? Am facing this issue for iOS only

[naorzr]

@spaul03 If using rn-fetch-blob is not an option, then I have no idea.. wasted like a day and a half on this problem, but couldn't work it out.
The route I would have taken would be trying to see if there are other implementations for formData object that do work.

[paincher]

The only workaround that i found was uploading the image as a base64 string. In my case im using the library react-native-image-base64 and then uploading the file on a JSON payload. I dont really know if this is a good approach for larger images, but at least in my usea case it works like a charm

[spaul03]

@naorzr will it work for an expo detached app? my build started failing after it asked for POD UPDATE

[naorzr]

@spaul03 it depends, if you're using expokit then there are some issues with rn-fetch-blob and expokit, but if you detached to bare react native, then it should work fine, did you remember to do cd ios && pod install?

[satya164]

cc @janicduplessis

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.