使用 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 中）传递给全局变量 (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();
      });
    });
  }

使用 caman 修改图像，然后将其上传到 firebase

Modify an image using caman and then upload it to firebase

typescript

firebase

ionic-framework

ionic3

camanjs