[Error: width and height must be > 0] On image compression

[wwessel01]

Current behavior

When trying to compress an image from URI or base64 an error is thrown. [Error: width and height must be > 0]

Expected behavior

To be able to compress an image using base64 and throw a more elaborate error.

Platform

• [X] Android
• [ ] iOS (Not tested)

Code

This will throw the error

try {
    const compressedSource = await compressFile(
        CompressFileType.IMAGE,
        'https://picsum.photos/500'
    );
    console.log(compressedSource);
} catch (error) {
    console.error(error);
}

And this is where the compression is handled

import { Image, Video, Audio } from 'react-native-compressor';
import { CompressFileType } from '../../enums/CompressFileType';

const compressFile = async (fileType: CompressFileType, value: string) => {
  console.log('Compressing ' + fileType + ' with value ' + value);
  switch (fileType) {
    case CompressFileType.IMAGE:
      console.log('IMAGE');
      const imageResult = await Image.compress(value, {
        compressionMethod: 'auto',
        // input: 'base64',
        maxHeight: 50,
        maxWidth: 50,
      });
      return imageResult;
    case CompressFileType.VIDEO:
      console.log('VIDEO');
      const videoResult = await Video.compress(value, {
        compressionMethod: 'auto',
      });
      return videoResult;
    case CompressFileType.AUDIO:
      console.log('AUDIO');
      const audioResult = await Audio.compress(value, {
        quality: 'medium',
      });
      return audioResult;
    default:
      throw new Error(`Unknown file type '${fileType}'`);
  }
};

export { compressFile };

[github-actions[bot]]

👋 @wwessel01 Thanks for opening your issue here! If you find this package useful hit the star🌟!

[saif-o99]

same issue here

[kristijantomic]

On Anroid same error "width and height must be > 0", while on iOS promise never resolve, I tried example code with auto compression.

import { Image } from 'react-native-compressor';

const result = await Image.compress('...', {
  compressionMethod: 'auto',
});

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 932.83 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/kristijan/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 23, 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0, 31.0.0
      System Images: android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.4/13F17a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_332 - /usr/bin/javac
  npmPackages:
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-macos: Not Found

[brianso123]

same issue on android

[brianso123]

found a work around by removing compressionMethod: 'auto'

[josmmv]

I had this issue working with URI returned by react-native-document-picker, I solved it by using react-native-fs copying the file into a temporary path, like this:

import { Image } from 'react-native-compressor'
import RNFS from 'react-native-fs'

...

const tempPath = RNFS.TemporaryDirectoryPath + '/' + fileName

await RNFS.copyFile(uri, tempPath)
const compressedImage = await Image.compress(tempPath, {
	compressionMethod: 'auto',
})

[anhnch]

For me the error occurs if I compress base64 string on Android

[pontustengroth]

Anyone find a solution to this?

[pontustengroth]

Solved it by providing a file:// path instead of a content:// path

[vineethsagar]

@pontustengroth how did you convert from content:// to file:// ?

[pontustengroth]

@pontustengroth how did you convert from content:// to file:// ?

const uri = FileSystem.cacheDirectory + `file-${makeid(16)}`;
await FileSystem.copyAsync({
  from: "content://path",
  to: uri,
});

Then sending uri for compression

[Yasa000]

remove compressionMethod: 'auto', this willl work but image did'not compressed.

[dmsierra11]

The only thing that has worked for me is removing compressionMethod: 'auto', but that disables the compression, so is not really a solution. I have tried other suggestions like saving the file in a temp file and adding file:// prefix, but no luck. Are the maintainers of this library looking into this?

[numandev1]

🙏 sorry for a long ago I was not maintaining due to the huge office workload, hopefully, I am going to start fixing bugs on a weekend basis, I will fix at least 2 issues on the weekend, for priority bugs you can join the discord channel https://discord.gg/dtYzk8sp where we can discuss which bug is most important

[numandev1]

@dmsierra11 @wwessel01 @kristijantomic @saif-o99 should I add support for compressing images from the server like this https://picsum.photos/500👀

[suleymanbasbug]

@dmsierra11 @wwessel01 @kristijantomic @saif-o99 should I add support for compressing images from the server like this https://picsum.photos/500👀

This is what i require.

[numandev1]

@suleymanbasbug @dmsierra11 @kristijantomic @saif-o99 released in 1.7.1, can you check compression for remote images/videos?