使用caman修改圖片，然后將其上傳到Firebase

Question

這是我的問題。 我想使用caman修改圖片，然后將其上傳到Firebase。 那是我的代碼

import { Component, NgZone } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import firebase from 'firebase';

declare var Caman: any;

@Component({
  selector: 'page-filtri',
  templateUrl: 'filtri.html'
})
export class FiltriPage {

fotoModificata: any;
public fotoScelta;
itemRef : firebase.database.Reference = firebase.database().ref('/matrimonio1');
firestore = firebase.storage();
alertCtrl: AlertController;
imgsource: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, alertCtrl: AlertController,   public zone: NgZone,
) {

    this.alertCtrl = alertCtrl;
    this.fotoScelta = navParams.get("foto");
  }

  addFilter(){

       Caman("#image", function(){
         this.brightness(5);
         this.render(function () {
         var fotoModificata = this.toBase64();

   });

 });

}


upload() {


    let storageRef = firebase.storage().ref();
    const filename = Math.floor(Date.now() / 1000);
    const imageRef = storageRef.child(`images/${filename}.jpg`);

    imageRef.putString(this.fotoModificata, firebase.storage.StringFormat.DATA_URL).then((snapshot)=> {

// il codice sotto prende l'url della foto appena caricata
         this.firestore.ref().child(`images/${filename}.jpg`).getDownloadURL().then((url) => {
           this.zone.run(() => {
             this.imgsource = url;

// carica l'url in firebase.database
      let newPostRef = this.itemRef.push();
          newPostRef.set({
            "nome" : " ",
            "url" : url
          });


            })
         });

         this.showSuccesfulUploadAlert();


       }, (err) => { });

  }

  showSuccesfulUploadAlert() {

      let alert = this.alertCtrl.create({
        title: 'Caricata!',
        subTitle: 'La foto è stata caricata!',
        buttons: ['OK']
      });
      alert.present();

      this.fotoModificata = "";

  }

}

我肯定知道upload（）函數有效。 我如何從addFilter函數導出var fotoModificata以便在upload（）中使用？ 如果我在var聲明后立即使用console.log，我可以在控制台中看到映像的base64字符串，但是如果我在其他地方登錄控制台，則我已經並且未定義。 我該如何解決？

Answer 1

好的，這就像您需要將addFilter函數（當前存儲在var fotoModificata中）的結果傳遞給全局var（fotoModificata）一樣。

我將在下面執行此操作：

addFilter() {

    // save scope of global "this" here:
    let scope = this;

    Caman("#image", function(){
      this.brightness(5);
      this.render(function() {
      // use the scope as a pointer to the global scope to assign the value:
      scope.fotoModificata = this.toBase64();
      });
    });
  }