Image can't resize, it is compress

[ntnamag]

Version

• react-native-image-crop-picker v0.19.1
• react-native v0.52.2

Platform

• iOS (no test)
• Android (tested)

Steps to reproduce

Image only compress, can't resize with below options

ImagePicker.openPicker({
                        multiple: true,
                        maxFiles: 9,
                        compressImageMaxWidth: 640,
                        compressImageMaxHeight: 480,
                        compressImageQuality: 0.75,
                        mediaType: 'photo'
                    });

[ivpusic]

what image size do you get in a response?

[ntnamag]

image size ~70-100kb, dimensions is same source image

[robdsoule]

react-native-image-crop-picker v0.20.0 RN v0.53.3

Also seeing this issue where compressImageMaxWidth and compressImageMaxHeight are being honored on iOS but having no impact on image dimensions for android

[rabindrachhachan]

Hi, Any update in image compression, currently my image is compressed but size and dimension are still same as original image. original image size is 4mb and dimension is 768*1024. I need image size to be 100-120kb after compression .

[staffannase]

Also have this issue, not tested on ios but on android compressImageMaxWidth and compressImageMaxHeight is not respected.

[armaanahluwalia]

Same issue here. @ivpusic Shouldn't issues like this be super high on the priority list considering they're listed in the readme as options and don't actually work?

Edit: FYI this is android only. Works on iOS.

[toytonic]

stumbled upon the same. android doesn't work.

[DISKONEKTeD]

This issue only seems to happen with multiple images is selected.

the cropping is completely ignored when multiple is set to true on android

[DISKONEKTeD]

Since this seems to be an issue that's been around a while, i suggest using: https://github.com/bamlab/react-native-image-resizer

Note: i had an issue with that package regarding SDK vesions, so I had to add this to android/build.grade:

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 26 // <-- match this to your project's compileSdkVersion
                buildToolsVersion '26.0.3' // <-- match this to your project's buildToolsVersion
            }
        }
    }
}

then i imported it and did this where react-native-image-crop-picker fails to resize/crop (possibly compress as well, didnt' check), it's a quick WIP:

   ImagePicker.openPicker({
      mediaType: "photo",
      multiple: true,
      maxFiles: 4,
      width: 1080,
      height: 1350,
      cropping: true,
      compressImageMaxWidth: 1080,
      compressImageMaxHeight: 1350,
    }).then((image) => {

      // console.log(image);
      const imagesArray = [];
      if (Platform.OS === "android") {
        for (let i = 0; i < image.length; i++) {
          const { path, mime } = image[i];

          let compressFormat;

          if (mime === 'image/jpeg') {
            compressFormat = 'JPEG';
          } else if (mime === 'image/png') {
            compressFormat = 'PNG';
          }
          console.log(image[i]);
          // null means images are stored in cache folder e.g. context.getCacheDir()
          // probably be a good idea to clean/delete after using the compressed files for upload
          ImageResizer.createResizedImage(path, 1080, 1350, compressFormat, 100, 0, null)
            .then((response) => {
              console.log(response);
              // send to server for upload w/e
              // response.path is the path of the new image
            })
            .catch((err) => {
              // TODO:
              // Oops, something went wrong. Check that the filename is correct and
              // inspect err to get more details.
            });
        } else {
        // do ios stuff here etc send to server etc w/e
      }`

But otherwise react-native-image-crop-picker works perfectly for my needs and it is very much appreciated!

This isn't the most practical or prettiest solutions, but seem like this will have to do for users who want multiple images and want resize/compressed to work on android. At least for now, until this gets addressed at some point.

[hkung77]

So this fork seems to provide the fix for images respecting the max compressed width/height (https://github.com/ChrisLahaye/react-native-image-crop-picker)

[chengsam]

This is due to a bug in the compressor it used.

[xstable]

When will it be fixed, or should be choosed another compressor. In my opinion it's an important feature of image-crop-picker which should be fixed soon.

[s5963028]

some updates?

[dragma]

Since this seems to be an issue that's been around a while, i suggest using: https://github.com/bamlab/react-native-image-resizer

Note: i had an issue with that package regarding SDK vesions, so I had to add this to android/build.grade:

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 26 // <-- match this to your project's compileSdkVersion
                buildToolsVersion '26.0.3' // <-- match this to your project's buildToolsVersion
            }
        }
    }
}

then i imported it and did this where react-native-image-crop-picker fails to resize/crop (possibly compress as well, didnt' check), it's a quick WIP:

   ImagePicker.openPicker({
      mediaType: "photo",
      multiple: true,
      maxFiles: 4,
      width: 1080,
      height: 1350,
      cropping: true,
      compressImageMaxWidth: 1080,
      compressImageMaxHeight: 1350,
    }).then((image) => {

      // console.log(image);
      const imagesArray = [];
      if (Platform.OS === "android") {
        for (let i = 0; i < image.length; i++) {
          const { path, mime } = image[i];

          let compressFormat;

          if (mime === 'image/jpeg') {
            compressFormat = 'JPEG';
          } else if (mime === 'image/png') {
            compressFormat = 'PNG';
          }
          console.log(image[i]);
          // null means images are stored in cache folder e.g. context.getCacheDir()
          // probably be a good idea to clean/delete after using the compressed files for upload
          ImageResizer.createResizedImage(path, 1080, 1350, compressFormat, 100, 0, null)
            .then((response) => {
              console.log(response);
              // send to server for upload w/e
              // response.path is the path of the new image
            })
            .catch((err) => {
              // TODO:
              // Oops, something went wrong. Check that the filename is correct and
              // inspect err to get more details.
            });
        } else {
        // do ios stuff here etc send to server etc w/e
      }`

But otherwise react-native-image-crop-picker works perfectly for my needs and it is very much appreciated!

This isn't the most practical or prettiest solutions, but seem like this will have to do for users who want multiple images and want resize/compressed to work on android. At least for now, until this gets addressed at some point.

I used this. It is working so far ! Thanks a lot !