angulaire/Firebase - Comment redimensionner une image avant de télécharger

Question

Qu'est-ce que je utilise

• angulaire
• Firebase

Ce que je suis en train de réaliser

• une imag Téléchargement e à firebase (a ce bas)

• Redimensionner l'image avant de télécharger

Là où je suis coincé

• donc je peux télécharger avec succès une image pour le stockage Firebase

• Ce que je voudrais éviter est les utilisateurs de télécharger des images plus grandes que 300 x 300

Question

1. Comment puis-je faire en sorte que toute personne d'image est redimensionnée télécharge de manière appropriée afin que mon stockage/coûts ne sont pas augmenté avec 4000px images?

Service Mon Upload

Voici comment télécharge avec succès mon composant à Firebase. Si quelqu'un peut aider sur la façon de redimensionner/réduire la taille de l'image avant qu'il ne soit téléchargé, je serais extrêmement reconnaissant!

uploadImage(upload: Upload) { 
    this._subscription = this.authService.user.subscribe(user => { 
     if (user) { 

     // Generate a new firebase key 
     let newPostKey = firebase.database().ref().child('albums').push().key; 


     // Create a reference to the firebase storage 
     this.imagePathString = 'thumbnail/' + newPostKey + '/thumbnails'; 

     const storageRef = firebase.storage().ref(); 
     const uploadTask = storageRef.child(this.imagePathString).put(upload.file); 

     // Upload task initiated - View progress and update real time database 
     uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
      (snapshot) => { 
      upload.progress = (uploadTask.snapshot.bytesTransferred/uploadTask.snapshot.totalBytes) * 100; 
      console.log(upload.progress); 
      }, 
      (error) => { 
      // upload failed 
      console.log(error) 
      }, 
     () => { 
      return undefined; 
      } 
     ); 
     } 
    }); 
    } 

Answer 1

Avez-vous essayé ng2-img-cropper? Pour la démonstration, cochez cette case plunkr