Modify an image using caman and then upload it to firebase

Question

Here is my problem. I want to modify an image using caman and then upload it to firebase. That's my code

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 = "";

  }

}

I know for sure that the upload() function works. Ho can I export the var fotoModificata from the addFilter function to be used in upload() ? If I use console.log immediately after the var declaration i can see in console the base64 string of my image but if I log in console somewhere else I've and undefined. How can I solve?

Answer 1

OK this feels like all you need is to pass result of addFilter function (currently stored in var fotoModificata) to global var (fotoModificata).

I would do this below:

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();
      });
    });
  }