Capacitor Camera, invalid base64?

Capacitor
1

Hi !

I use the “Capacitor Camera” plugin, and this is my code :

const takePicture = async () => {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Base64
      });
      var imageUrl = image.base64String;
      this.imageList.push("data:image/jpeg;base64," + imageUrl);
    };

And the returned base64 starts with :

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/

But when I go to another website to convert my image to base64, it starts with another code:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzwAAA

Capacitor returns the wrong value? Because it is not usable behind in my API, it is unrecognized to recreate the image.

Do you have a solution ?

2

First off, I would advise not using base64 at all. You’re paying 30% overhead for everything - memory, network bandwidth. So if you stick with binary data and Blobs and multipart encoding (which is designed for uploading binary data, should you need to do that), you won’t have to worry about any of this and your app will be more efficient.

If you aren’t convinced yet, “base64” doesn’t have a single specification. There are different alphabets that can be used, and it seems you are using two tools that are not using the same alphabet here. The top one looks like the old PGP email alphabet, that contains ‘/’. The bottom one is probably the URL and filesystem-safe one that substitutes ‘-’ and ‘_’ for ‘+’ and ‘/’.

So if you want to barrel on continuing to use base64, you need to change which alphabet your backend is expecting.

3

In your getPhoto function, use this instead of Base64
resultType: CameraResultType.DataUrl,

And after this :
var imageUrl = image.dataUrl;

But like rapropos I suggest you to use Blob and FormData() to transfert image with your backbend