Angular / Firebase - 如何在上传之前调整图像大小

Question

我在用什么

• 角度
• Firebase

我正在努力实现的目标

• 将图像上传到 Firebase（已关闭）

• 在上传之前调整图像大小

我被困在哪里

• 这样我就可以成功地将图像上传到 Firebase 存储

• 我想避免用户上传大于 300 x 300 的图片

问题

1. 如何确保有人上传的任何图片都已适当调整大小，这样我的存储空间/成本不会因 4000 像素的图片而增加？

我的上传服务

以下是我的组件如何成功上传到 Firebase。如果有人可以在上传之前帮助如何调整/减小图像大小，我将非常感激！

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

你试过ng2-img-cropper 吗？对于演示检查这个plunkr