Display image content as Base64 string?

Hi, this is my first time learning Ionic. I want to take picture, then convert it Base64 string so it can be sent via HTTP POST. Here’s my code:

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Dialogs } from '@ionic-native/dialogs/ngx';
import { File, FileEntry } from '@ionic-native/File/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';
import { Base64 } from '@ionic-native/base64/ngx';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page {

  constructor(private base64: Base64, private camera: Camera, private dialogs:Dialogs, private file:File, private filePath: FilePath, private webview:WebView) { }

  takePicture(){
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
  
    this.camera.getPicture(options).then((imageData) => {

    this.base64.encodeFile(imageData).then((base64File: string) => {
      this.dialogs.alert(base64File)
    .then(() => console.log('Dialog dismissed'))
    .catch(e => console.log('Error displaying dialog', e));
    }, (err) => {
      console.log(err);
    });
    }, (err) => {
      console.log(err);
    });
  }
}

I don’t see any alert displaying the Base64 value of the image What’s wrong here?

Change your destination type to data_url

Nope, still no alert. Or maybe I did something wrong on another part of the code?
Hmm…

I’ve took another look at your example and it looks fairly heavily over-cooked, in-particular with your import statements.

This is an example of using the camera with Cordova.

Let me know if you can make this work.

Yeah I’m aware of that. Too many copy pastes here and there.

I think I got it work:

 async showMessage(msg) {
    const alert = await this.alertController.create({
      header: 'Base64',
      subHeader: 'Result',
      message: msg,
      buttons: ['OK']
    });

    await alert.present();
  }

  takePicture(){
    const options: CameraOptions = {
      quality: 35,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
  
    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.showMessage(base64Image);
    });

  }

The downside is it takes about 20 seconds to display the result on my XiaoMi Mi 5, which is not a really crappy one. I used low quality setting here.

Then I found this:

To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL

Is there a more efficient way?

Could you just try outputting the content’s length to your alert instead of the whole crazy payload? That might speed it up a little…

Ah you are correct: 760204. Yep this is one is a really huge string.
Anyway, the dialog only serves as debugging aid. Now I know that I got the Base64 value correct, I guess I can processed working on the HTTP POST part.

hello , please i need your help , can you send me your email ?

You can IM me within this forum but I don’t give out my personal email address