Display image content as Base64 string?

Ionic Framework ionic-v3
1

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?

2

Change your destination type to data_url

3

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

4

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.

5

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?

3 Likes
6

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…

7

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.

8

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

9

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