[英]Modify an image using caman and then upload it to firebase
这是我的问题。 我想使用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字符串,但是如果我在其他地方登录控制台,则我已经并且未定义。 我该如何解决?
好的,这就像您需要将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();
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.