I want to get image from camera or galery, but when I choose an Image from galery, or get picture form camera, the image is not showing
this is my code:
tulis.html :
<button ion-button small (click)="Gambar()">Pilih Gambar</button>
<img *ngIf="image"
[src]="image" />
And this is my tulis.ts code :
import { Component, ChangeDetectionStrategy } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, ActionSheetController, AlertController, normalizeURL } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
/**
- Generated class for the TulisPage page.
- See https://ionicframework.com/docs/components/#navigation for more info on
- Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: ‘page-tulis’,
templateUrl: ‘tulis.html’,
})
export class TulisPage {
base64Image:any;
private image: string;
constructor(public navCtrl: NavController, public navParams: NavParams,public actionSheetCtrl: ActionSheetController,public alertCtrl: AlertController,
private camera:Camera) {
}
Gambar(){
const actionSheet = this.actionSheetCtrl.create({
title: ‘Pilih Gambar’,
buttons: [
{
text: ‘Camera’,
handler: () => {
this.openCamera();
}
},{
text: ‘Gallery’,
handler: () => {
this.openGallery();
}
},{
text: ‘Cancel’,
role: ‘cancel’,
handler: () => {
console.log(‘Cancel clicked’);
}
}
]
});
actionSheet.present();
}
openCamera(){
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
openGallery(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType:this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
}