javascript - Ionic3 和 FabricJS

Question

我对 Ionic3 和 FabricJS 有一个大问题。它向我显示了 html 中的图像，但是当我尝试保存它以上传到 Firebase 时，它​​只上传一个白色屏幕，就像一个新 Canvas 。

这是我的代码

import { Component, NgZone } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import firebase from 'firebase';
import { HomePage } from '../home/home';

import 'fabric';
declare const fabric: any;

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

@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");
}


@ViewChild(Slides) slides: Slides;

goToSlide() {
      this.slides.slideTo(2, 500);
    }

ionViewDidLoad(){

  let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  let height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  let altezza = height / 100 * 60;

  canvas = new fabric.Canvas("c");

  canvas.setDimensions({ width: width, height: altezza});
  fabric.Image.fromURL(this.fotoScelta, function(img) {
    img.scaleToWidth(canvas.getWidth());
    canvas.add(img);
    canvas.renderAll();
    });

this.fotoModificata = canvas.toDataURL("png");

}

upload() {

    let storageRef = firebase.storage().ref();
    const filename = Math.floor(Date.now() / 1000);
    const imageRef = storageRef.child(`images/${filename}.png`);

    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}.png`).getDownloadURL().then((url) => {
           this.zone.run(() => {
             this.imgsource = url;

// carica l'url in firebase.database
      let newPostRef = this.itemRef.push();
          newPostRef.set({
            "nome" : "",
            "like" : "",
            "descrizione" : "",
            "url" : url
          });


            })
         });
        this.showSuccesfulUploadAlert();

       }, (err) => { });

  }


goToHome() {
    this.navCtrl.setRoot(HomePage);
  }


showSuccesfulUploadAlert() {

      let alert = this.alertCtrl.create({
        title: 'Caricata!',
        subTitle: 'La foto è stata caricata!',
        buttons: ['OK']
      });
      alert.present();

      this.fotoModificata = "";
      //this.goToHome();

  }

}

this.fotoModificata 是我为上传功能设置的变量。 this.fotoScelta 是一个变量，包含我的图像的 base64 字符串。这是我的 HTML 代码

<ion-list>
  <canvas id="c"></canvas>
</ion-list>

如果我要求的话，它会在控制台中打印一个base64代码，但它是一个空白图像。

如何修复它？

Answer 1

let self = this;
fabric.Image.fromURL(this.fotoScelta, function(img) {
  img.scaleToWidth(canvas.getWidth());
  canvas.add(img);
  canvas.renderAll();
  self.fotoModificata = canvas.toDataURL({
    format: "png"
  });
});

在图像加载回调中使用toDataURL，因此它将在导出的png中包含图像。