The base64 image from the Cordova camera plugin is incredibly slow to appear. It takes about 15 seconds to load the image when I push() it to another page as the code below demonstrates. When the image is not pushed to another page, but is programed to appear on the same view, it takes even longer to appear. And it seems when I manipulate the Camera.getPicture() options the image will not appear or takes even longer to do so. I am testing the app through Xcode on ios, on my iPhone5c.
How can I fix this? I’m really not sure how to show a local image in html in a reasonable amount of time. I’d like to have the image appear so that a user can write a description below the image before they send it to my Firebase database.
Page1.ts
import { Component, NgZone, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';
import {Camera} from 'ionic-native';
import {LandCamPage} from '../land-cam/land-cam';
@Component({
selector: 'page-camera',
templateUrl: 'camera.html'
})
export class CameraPage {
@ViewChild(Content) content: Content;
public guestPicture: any;
constructor(public navCtrl: NavController, public eventData: EventData, zone : NgZone) {
this.takePicture();
}
takePicture(){
Camera.getPicture({
destinationType : Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.PNG
}).then((imageData) => {
this.guestPicture = "data:image/png;base64," + imageData;
this.navCtrl.push(LandCamPage, {itemss: this.guestPicture});
}, (err) => {
console.log(err);
});
}
Page2.ts
export class LandCamPage {
public Picture: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.Picture = navParams.get('itemss');
}
}
Page2.html
<ion-content padding>
<ion-card>
<ion-card-header>
</ion-card-header>
<ion-card-content>
<ion-list no-lines>
Latest Photo:
<img [src]="Picture" />
<ion-item>
<ion-input [(ngModel)]="guestName" type="text"
placeholder="Description">
</ion-input>
</ion-item>
<button ion-button (click)="cancel()">
cancel
</button>
<button ion-button color="primary" block (click)="addGuest(guestName)">
Post Photo
</button>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
