Resize image and get base64

#1

Is there a way to resize image from device and get the base64 (ie. without the allowEditing).
My use case is the image should be resize if width or height is too big.

GL or Canvas or something more simple ?

EDIT: by resizing I don’t mean with CSS but resizing the content of the image before upload…

#2

maybe I am understanding your question wrong but the resizing is just css. in terms of base64 if the image comes from the image picker or the camera then the base 64 is given to you if its a url than you don’t have accesses to it although not sure why you would need it?

#3

by resizing I don’t mean with CSS but resizing the content of the image before upload…

#4

Hey @xcarpentier. Not sure if this is what you’re looking for, but in SDK 18, the expo team added the ability to get base64 data when selecting an image with the ImagePicker Component ==> https://docs.expo.io/versions/latest/sdk/imagepicker.html#options-object-

If you just have an image uri, I’ve used this hack before to get the base64 data:

(image is an Image uri)

import {
  Image,
  ImageStore,
  ImageEditor,
} from 'react-native';

Image.getSize(image, (width, height) => {
  let imageSettings = {
    offset: { x: 0, y: 0 },
    size: { width: width, height: height }
  };
  ImageEditor.cropImage(image, imageSettings, (uri) => {
    ImageStore.getBase64ForTag(uri, (data) => {
      // data == base64 encoded image
    }, e => console.warn("getBase64ForTag: ", e))
  }, e => console.warn("cropImage: ", e))
})

Let me know if this is what you’re looking for.

4 Likes
#5

Thank you @capitanredbeard!

I will test it ASAP and let you if that fit my use case.

:slight_smile:

#6

Sorry but your solution not allowed to resize image. I need to resize image. (And not the display image)
Please see here more info: https://expo.canny.io/feature-requests/p/add-maxwidth-maxheight-on-image-picker--camera

#7

Hi @xcarpentier, I also struggled with resizing images directly in expo until now. The solution of @capitanredbeard worked for me, but in order to resize the images I had to alter the imageSettings a little:

imageSettings: {
    offset: { x: 0, y: 0 },
    size: { width: width, height: height },
    displaySize: { width: (width / 4), height: (height / 4) },
    resizeMode: 'contain',
}

This resizes the image to a quater of it’s orignal size.
I hope this helps you until the release of SDK 24 with the new Image API.

#8

Hello @maximilian-ruppert,
Thank you for your help!
I test this solution but you should have displayable image apparently.
I wait the solution in SDK 24 :slight_smile:
Bye

#9

@xcarpentier SDK 24 ImageManipulator is here and works perfectly!

1 Like