readAsDataURL returns an invalid Base64 string for PNG, but not for JPG/JPEG

Question

Running a React Native app, and trying to solve this issue. The b64 is sent to a an API and stored in db as blob, I know it's not best practice, but this isn't an app of any scale, just a simple student project.

const file = await DocumentPicker.getDocumentAsync({
        type: "image/*",
        copyToCacheDirectory: true,
    });

for mobile:

const uri = await fetch(file.uri);
const blob = await uri.blob();
const res = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
}).then((result) => {
   return result;
}); 
base64 = res as string;

for web i just use file.uri since it's b64 there.

However, in both cases b64 for the png is incorrect, but it's correct for jpg and jpeg. Is this a known issue, or have I just missed some special guards I need to take for the alpha value?

FYI running react-native using expo

Edit, example of the b64 this produces for png:

https://controlc.com/f9073658 -b64 too long for SO

Answer 1

Base64 is just encoding bytes using 64 ASCII symbols. I am not sure I got what is wrong with PNG but if you want you can use standard Image component from React Native like this:

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
  }}
/>