CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-image
warrenbuffering
warrenbuffering

Reputation: 242

Getting The Base64 of an Image from CameraRoll

I'm trying to get the Base64 of an image from CameraRoll so I can pass it along to a third-party system. I don't want to use RN-Fetch-Blob. I've tried ImageStore, but it says I'm supplying an invalid URI.

What's the best way to go about this? Does React-Native have the means? Or do I have to write something natively?

Upvotes: 2

Views: 1705

Answers (1)

warrenbuffering
warrenbuffering

Reputation: 242

Just in case someone else ends up with the same issue....

I ended up not using RN-Fetch-Blob at all. Although react-native doesn't provide a way to access the base64 of an image directly, you can access it by cropping the image via ImageEditor. Extract the images width and height, and then crop the image with the same dimensions. This moves the image to the local storage (ImageStore), and once cropped, provides a method for extracting the images' base64. Like so...

    _selectImage = (photo) => () => {
    const { height, uri, width } = photo.node.image

    ImageEditor.cropImage(uri,
        {
            offset: { x: 0, y: 0 },
            size: { width: width, height: height },
        },
    (uri) => {
        this._getBase64(uri)
    },
    (failure) => {
        Alert.alert("Error: Unable to attach image")
    })
}


_getBase64 = (uri) => {
    ImageStore.getBase64ForTag(uri, 
        (base64) => {
            this._onImageSelected(base64, uri)
        },
        (failure) => {
            Alert.alert("Error: Unable to secure image data")
        }
    )
}

It's not pretty, but it does work. Hopefully React-Native will be adding this functionality to their framework soon.

Upvotes: 3

Related Questions