Compressing base64 encoded images in React-Native on Android does not recognise 'data' protocol

Question

Issue

Within a React-Native (0.43) application we are using a component that uses a SectionList to render photos sorted by day. Each section can contain multiple images. Photos are taken using the react-native-image-crop-picker library and uploaded to the backend, or queued locally if no internet connection is available, encoded in base64 format. The image resolution is set to 800x800 pixels (requirement for other purposes of the images). On phones with lower memory, rendering ~20 images will crash the app due to insufficient memory. This issue can only be reproduced on low-end Android phones but I expect this to be a low memory issue and not related to the OS. To tackle this issue, thumbnails need to be generated to test if this is the case. Independent of when these thumbnails are generated (before sending to server or on-the-fly before loading component). The code below works fine for iOS but for Android it throws the error: Unknown protocol: data which comes from the ImageEditor.cropImage() function.

Snippet from main .js file

    //The mergeReduxWithMeteor function takes care of merging the redux state, 
    //containing images not yet uploaded to the server, 
    //and the Meteor data as received by the server.
    //No issues here...

    helpers.mergeReduxWithMeteor(props.photoStore, props.SynergySummaryReady ? props.SynergyData : [])

        //The imageHelper.compressPhoto does the actual compression
        //No issues with the promise chain as is.

        .then((data) => {
            return Promise.all(data.map(imageHelper.compressPhoto))
        })

        // The remaining functions take care of the formatting for the SectionList.
        // No issues here either... :)

        .then((data) => {
            return helpers.clusterDataByDay(data)
        })

        //We populate the resulting data in the state that is used for the SectionList

        .then((data) => {
            this.setState({NotHorusData: data})
        })
        .catch((error) => console.error(error))

imageHelper.compressphoto()

export function compressPhoto(photo) {
  return new Promise((resolve, reject) => {

let imageSize = {
  offset: {
    x: 0,
    y: 0
  },
  size: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE
  },
  displaySize: {
    width: IMAGE_TARGET_SIZE,
    height: IMAGE_TARGET_SIZE,
  },
  resizeMode: 'contain'
}


ImageEditor.cropImage(`data:image/jpeg;base64,${photo.data.userPhoto}`, imageSize, (imageURI) => {
     ImageStore.getBase64ForTag(imageURI, (base64Data) => {
       resolve({
         ...photo,
         data: {
           ...photo.data,
           userPhoto: base64Data,
         }
       })
   }, (error) => reject(error))
 }, (error) => reject(error))

  })
}

Approach 1: Fix data protocol issue on Android

Issue on Github from RN addresses the same issue but no solution is provided.

Approach 2: Bypass data protocol issue by providing uri on Android

Although less favourable due to the added communication/delay, another approach is to avoid the data protocol issue by providing a temporary URI provided by ImageStore. See the adapted code below for Android.

if(Platform.OS === 'android'){
  ImageStore.addImageFromBase64(`data:image/jpeg;base64,${photo.data.userPhoto}`, (tempURI) => {
    ImageEditor.cropImage(tempURI, imageSize, (imageURI) => {
         ImageStore.getBase64ForTag(imageURI, (base64Data) => {
           ImageStore.removeImageForTag(tempURI)
           resolve({
             ...photo,
             data: {
               ...photo.data,
               userPhoto: base64Data,
             }
           })
       }, (error) => reject(error))
     }, (error) => reject(error))
  }, (error) => reject(error))  
}

Unfortunately ImageStore.addImageFromBase64 is not recognised on Android.

Does anyone have any experience with ImageEditor and ImageStore on Android that might be helpful in this situation? Any other approaches are welcome too!

Answer 1

I managed to resolve the issue with the use of react-native-fetch-blob and react-native-image-resizer for both iOS and Android. Performance is unexpectedly good in comparison to the implementation in the question above. I shared the code below for others to use :)

export function compressPhoto(photo) {
return new Promise((resolve, reject) => {

    let tempUri = `${cache}/Vire_${photo.data.userPhotoDate}.jpg`

    fs.writeFile(tempUri, photo.data.userPhoto, "base64")
        .then(() => {
            ImageResizer.createResizedImage(
                `file:${tempUri}`, IMAGE_TARGET_SIZE, IMAGE_TARGET_SIZE, "JPEG", 100, 0).then((resizedImageUri) => {
                fs.readFile(`${resizedImageUri}`, "base64")
                    .then( data => {
                        resolve({...photo, data: { ...photo.data, userPhoto: data }})
                    })
                    .catch(error => reject(`readFile:error: ${error}`))
            },
            (error) => reject(`createResizedImage:error: ${error}`)
            )
        })
        .catch( error => {
            reject(`writeFile:error: ${error}`)
        })

     })
}

The gist is storing base64 encoded picture in the cache-directory and using imageResizer to fetch the image, compress it, and read it again in base64 for use.