Image resizing without detaching


#1

I need to resize/resample images from the device camera down in size before uploading them.

Is there a way to do this without detaching?

Thanks!
Marcus


#2

Hi,

resize because of the size or pixel. When it is enough to save size there seems to be a quality flag

let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: false,
            aspect: [4, 3],
            quality: 0.1,
        });

Ben


#3

I was actually looking for a pixel resize, but shrinking the file size by setting quality is better than nothing.I had missed that.

Thanks for your help!


#4

I am having the same issue. I did try lowering the quality, but in many cases (on an already-large image) it doesn’t decrease the file size by much.

Could including react-native-image-resizer be considered for a future release? (https://github.com/bamlab/react-native-image-resizer). Seems like it would solve this problem nicely. Thank you!


#5

react-native-image-resizer would be nice to have!
+1


#6

We track feature requests here if you want to start one for image resizing: https://expo.canny.io/feature-requests. It’s unlikely we’d include that specific react-native-image-resizer module unless it were incredibly well done and were structurally set up to be maintained well but the general idea of resizing images seems reasonable.


#7

Heads-up I was able to work around this by using RN ImageEditor class. ImageEditor.cropImage() can resize an image without actually cropping it. Wish it was a little more straightforward, though.

The below example resizes an image to fit within a 640x640 box:

const resizeImage = image => {
  const cropData = {
    offset: { x: 0, y: 0 },
    size: {
      width: image.width,
      height: image.height,
    },
    displaySize: {
      width: 640 * (image.width > image.height ? 1 : image.width / image.height),
      height: 640 * (image.height > image.width ? 1 : image.height / image.width),
    },
    resizeMode: 'cover',
  };

  // get info for original image
  const uriParts = image.uri.split('.');
  const fileType = uriParts[uriParts.length - 1];

  const promise = new Promise(resolve => {
    ImageEditor.cropImage(
      image.uri,
      cropData,
      success => {
        resolve({
          uri: success,
          name: `photo.${fileType}`,
          type: `image/${fileType}`,
        });
      },
      err => {
        console.log('edited err: ', err);
      }
    );
  });

  return promise;
};

#8

Seems that it works on android very well, Do you have any updates or improvements for this, maybe there is better approaches recently, what do you think? Any suggest. BTW. Great Job :wink:


#9

I haven’t tried it yet, but seems like the new-ish ImageManipulator is the way to do this: https://docs.expo.io/versions/latest/sdk/imagemanipulator#arguments


#10

Yes, you have right. I am going to use it next time.