Cordova Camera Image Incredibly Slow to Appear In View


#1

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>

Taken image from camera not able to show in UI,
#2

My suggestion to you is to add inside of the function “Camera.getPicture” the elements:

quality: 50,
targetWidth: 800,
targetHeight: 600,

Could be a simple solution that works.


#3

Im also having this issue @adevoid were you able to speed up the process of taking and displaying the picture ?


#4

Hi, Did you managed to find an acceptable fix for this problem? i am facing the same issue at the moment.