これが私の問題です。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() 関数が機能することは確かです。var fotoModificata を addFilter 関数からエクスポートして、 upload() で使用できますか? var 宣言の直後に console.log を使用すると、コンソールでイメージの base64 文字列を確認できますが、別の場所でコンソールにログインすると未定義になります。どうすれば解決できますか?