使用 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((吗？如果我使用控制台.log则在var声明之后，我可以在控制台中看到我的映像的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();
      });
    });
  }