Hi,
I’m a newbie in Ionic and I’m trying to build my first app. I’m going to build a Scanner app that can take picture and convert it into a PDF file.
At the moment I could take pictures with format base64 and display it in template. But when I reload my app the pictures disappear.
After searching I realize that I have to use File plugin to save base64 string into a file but after read the docs of File Plugin I still don’t know how to work with it, can somebody explain for me the way to save base64 string in to a file and how to get it to display in template.
Thank you so much.
This is my .ts file:
ngOnInit() {
this.photos = [];
}
deletePhoto(index) {
let confirm = this.alertCtrl.create({
title: 'Sure you want to delete this photo? There is NO undo!',
message: '',
buttons: [
{
text: 'No',
handler: () => {
console.log('Disagree clicked');
}
}, {
text: 'Yes',
handler: () => {
console.log('Agree clicked');
this.photos.splice(index, 1);
}
}
]
});
confirm.present();
}
takePhoto() {
const options : CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true,
saveToPhotoAlbum: true
}
this.camera.getPicture(options) .then((imageData) => {
this.base64Image = "data:image/jpeg;base64," + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
console.log(err);
});
}
And this is the codes display pictures in .html file:
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let photo of photos; let id = index">
<ion-card class="block">
<ion-icon name="trash" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
<img [src]="photo" *ngIf="photo" />
</ion-card>
</ion-col>
</ion-row>
</ion-grid>