Passing an Image from one Page to Another

Ionic Framework ionic-v3
1

I am trying to take an image in one page, and then display the same image on another page(the home page).
I am setting strings along with the photo and passing them to home page fine, so I know it is working but I am unsure how to go about doing this with an image. When I take the picture on its own page, I am able to display, but once I go back to home page I am unsure how to show it. Do i store a reference location where the photo is saved and use that in my home page?
Thanks for any help. Code below.

Add-item page(where I take the picture and push a title )

//pushing plant title to plants db
  save(val){
      //in console so we can check
    console.log('data added '+val);
    //pulls the node first to not overwrite shit
    this.storage.get('plantTitles').then((data) => {
      if(data != null)
      {
          //for empty array
        data.push(val);
        this.storage.set('plantTitles', data);
        //push back to home
         this.navCtrl.setRoot(HomePage);
      
      }
      else
      {
          //not sure how this will work but it should eventually take our objects
        let array = [];
        array.push(val);
        this.storage.set('plantTitles', array);
        this.navCtrl.setRoot(HomePage);
      
      }
    });
  };
//Begin function to take picture -- Called on Additem.html  
takePicture() {
const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  targetWidth: 1000,
  targetHeight: 1000
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64:
 let cameraImageSelector = document.getElementById('camera-image');
let image = "data:image/jpeg;base64," + imageData;
cameraImageSelector.setAttribute('src', image );
}, (err) => {
 // Handle error
});
}
//End function to take picture
}

Add item HTML

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Notifications
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
    <ion-list no-lines>
        <ion-item>
          <ion-label>Plant Name</ion-label>
          <ion-input type="text" [(ngModel)]="title"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Notify me at: </ion-label>
          <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="notifyTime" (ionChange)="timeChange($event)"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>On these days:</ion-label>
        </ion-item>
        <ion-item *ngFor="let day of days">
            <ion-label>{{day.title}}</ion-label>
            <ion-checkbox [(ngModel)]="day.checked" color="primary"></ion-checkbox>
        </ion-item>
    </ion-list>
</ion-content>
 
<ion-footer>
 <ion-card-content>
      
     <button (click)="takePicture()" ion-button color="primary" full>Take a Picture</button>

      
      <img id="camera-image"/>
    
    <button id="schedule"(click)="addNotifications();  save(title)" ion-button color="primary" full>Schedule</button>
    <!--<button (click)="cancelAll()" ion-button color="danger" full>Leave me alone!</button>-->
 </ion-card-content>
</ion-footer>

Home Page

this.storage.get('plantTitles').then((data) => {
     //grabbed our titles from the node and called them data, now we assign the items array to it so we can call it html
      this.items = data;
      console.log(data);
    });
  };

Home Html

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      My Plants
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="gotoadditemPage();"><ion-icon name="add-circle"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-card>
  <p *ngFor="let item of items">
    {{item}}
  </p>
 </ion-card>

</ion-content>
2

Don’t interact with the DOM directly in Angular apps. Instead, use property binding:

this.photo = "data:image/jpeg;base64," + imageData;
<img [src]="photo">

With this approach, you just have to (re)acquire the data URL as a property of any other page and it will display as you expect.

1 Like