Ionic3和FabricJS

Question

I've a big problem with Ionic3 and FabricJS. It shows me the image in the html but when i try to save it to upload to Firebase it uploads me a white screen only, like a new canvas.

This is my code

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 is a variable I set for my upload function. this.fotoScelta is a variable that have the base64 string of my image. And this is my HTML code

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

It prints a base64 code in the console if I ask to, but it's a blank image.

How can I fix it?

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

use toDataURL inside image load callback,so it will include image in exported png.