Convert capacitor Camera result to Blob

Question

I need to convert the result from the Capacitor Camera plugin to a Blob for upload to Firebase Storage.

I could upload the Base64 string but I already upload Blobs/Files from a Browse button's FileList so I'd like not to change the design of this.

The Camera plugin provides the image data as a Base64 encoded string representing a PNG image.

I've tried the following:

const { Camera } = Plugins;

const image = await Camera.getPhoto({
  quality: 90,
  allowEditing: true,
  resultType: CameraResultType.Base64
});

const rawData = atob(image.base64String);
const blob = new Blob([rawData], { type: 'image/png' });

But the blob ends up not being a valid image.

Any help is appreciated.

Using: @angular/core: 9.1.4, @ionic/angular: 5.1.0, @capacitor/core: 2.1.1

Answer 1

I use this:

import {decode} from "base64-arraybuffer";

const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Base64,
}

const blob = new Blob([new Uint8Array(decode(cameraPhoto.base64String))], {
    type: `image/${cameraPhoto.format}`,
});

and if it needs to be converted to a file:

const file = new File([blob], "Name", {
    lastModified: moment().unix(),
    type: blob.type,
});