Can not display image capture ionic 3

[irtsuga]

please help me, why my project ionic camera can not display image after capture

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
home.html:

Ionic Blank The world is your oyster.

If you get lost, the docs will be your guide.

<button ionic-button (click)=“TakePhoto()”>Take Photo
<img *ngIf=“base64Image” src="{{base64Image}}"/>

========================================================================

home.ts:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
base64Image:any;
constructor(public navCtrl: NavController, private camera:Camera) {

}

TakePhoto() {
const options: CameraOptions = {
quality: 100,
targetWidth: 600,
sourceType: this.camera.PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.capturedPhoto = imageData;
}, (err) => {
console.log(“error occured!”);
});
}

}

================================================================

ionic info:
///////////////

[NikolaDrangovski]

First your base64Image property is empty you never give value to it. Also for valid and secure value you can use DomSanitizer

import {DomSanitizer} from '@angular/platform-browser';

Next in your constructor

constructor(private sanitizer: DomSanitizer)

than use the sanitizer

this.camera.getPicture(options).then((imageData) => {
this.base64Image = this.sanitizer.bypassSecurityTrustResourceUrl(imageData);
}, (err) => {
console.log(“error occured!”);
});

next in your HTML

<img *ngIf="base64Image" [src]="base64Image"/>

I forgot if the camera returns a proper base64 including the type, if not use this

this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpeg;base64,'+imageData);

[irtsuga]

Nikola. i have try it in my project, But did’nt Work

home.ts

import {DomSanitizer} from ‘@angular/platform-browser’;

export class HomePage {
base64Image:any;
constructor(public navCtrl: NavController, private camera:Camera, private sanitizer: DomSanitizer) {

}

this.camera.getPicture(options).then((imageData) => {
this.base64Image = this.sanitizer.bypassSecurityTrustResourceUrl(imageData);
//this.sanitizer.bypassSecurityTrustResourceUrl(‘data:image/jpeg;base64,’+imageData);
}, (err) => {
console.log(“error occured!”);
});
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
home.html

<button ionic-button (click)=“TakePhoto()”>Take Photo
<img *ngIf=“base64Image” [src]=“base64Image”/>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

[NikolaDrangovski]

Ah ok i get it now. In your camera options you have

const options: CameraOptions = {
quality: 100,
targetWidth: 600,
sourceType: this.camera.PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}

Destination type is destinationType: this.camera.DestinationType.FILE_URI

my example works if you want a base64 output so you need to change it like this
destinationType: this.camera.DestinationType.DATA_URL

or if you want to go the other way i think you will need to use a file API plugin like this one

Ionic Framework