Question

我试图在一个页面中拍摄图像，然后在另一个页面（主页）上显示相同的图像。我正在设置字符串以及照片并将它们传递到主页，所以我知道它正在工作，但我不确定如何使用图像进行此操作。当我在自己的页面上拍照时，我能够显示，但是一旦我回到主页，我不确定如何显示它。我是否存储了保存照片的参考位置并在我的主页中使用它？谢谢你的帮助。代码如下。

添加项目页面（我拍摄照片并推送标题）

//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
}

添加项目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>

主页

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>

离子/角度，将图像从一个页面传递到另一个页面

0 个答案: