Converting local image uri to blob inflates initial image size

• 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>
    );
  }
}

[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

[stale[bot]]

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.