Firebase/Ionic4 上传和裁剪图像到存储

Question

嘿，我正在尝试将裁剪后的图像上传到 Firebase。 我更喜欢使用离子原生的“图像选择器”和“裁剪”。 我真的不知道如何在裁剪后上传图像，因为它只返回新图像的路径。

我已经尝试过这样的事情。这有效，但我无法裁剪图像。但正如我所提到的，我更喜欢使用原生工具。

      export interface UploadData {
        name: string;
        filepath: string;
        size: number;
      }
  uploadFile(event: FileList) {        
      // The File object
      const file = event.item(0);        
      // Validation for Images Only
      if (file.type.split('/')[0] !== 'image') {
       console.error('unsupported file');
       return;
      }        
      // The storage path
      const path = `whatever/${new Date().getTime()}_${file.name}`;        
      // File reference
      const fileRef = this.storage.ref(path);        
      // The main task
      this.task = this.storage.upload(path, file, { customMetadata });        
      this.snapshot = this.task.snapshotChanges().pipe(        
        finalize(() => {
          // Get uploaded file storage path
          this.UploadedFileURL = fileRef.getDownloadURL();
          this.UploadedFileURL.subscribe(resp => {
            this.addImagetoDB({
              name: file.name,
              filepath: resp,
              size: this.fileSize
            });
          }, error => {
            console.error(error);
          });
        }),
        tap(snap => {
            this.fileSize = snap.totalBytes;
        })
      );
    }

    addImagetoDB(image: UploadData) {
        const id = this.db.createId();

        // Set document id with value in database
        this.imageCollection.doc(id).set(image).then(resp => {
          console.log(resp);
        }).catch(error => {
          console.log('error ' + error);
        });
    }
}

这就是我想要的方式。但我真的不知道，此时如何上传。

    pickImage() {
      this.imagePicker.getPictures(this.imagePickerOptions).then((results) 
    => {
        // tslint:disable-next-line: prefer-for-of
        for (let i = 0; i < results.length; i++) {
          this.cropImage(results[i]);
        }
      }, (err) => {
        alert(err);
      });
    }     
    cropImage(imgPath) {
      this.crop.crop(imgPath, { quality: 50 })
        .then(
          newPath => {
            // ?????
          },
          error => {
            alert('Error cropping image' + error);
          }
        );
    }

对不起，我对这些东西很陌生。 谢谢你的帮助:)

Answer 1

您似乎可以在不需要裁剪功能的情况下执行此操作。

这些是选项according to the docs：

options = {
    // Android only. Max images to be selected, defaults to 15. If this is set to 1, upon
    // selection of a single image, the plugin will return it.
    maximumImagesCount: int,

    // max width and height to allow the images to be.  Will keep aspect
    // ratio no matter what.  So if both are 800, the returned image
    // will be at most 800 pixels wide and 800 pixels tall.  If the width is
    // 800 and height 0 the image will be 800 pixels wide if the source
    // is at least that wide.
    width: int,
    height: int,

    // quality of resized image, defaults to 100
    quality: int (0-100),

    // output type, defaults to FILE_URIs.
    // available options are 
    // window.imagePicker.OutputType.FILE_URI (0) or 
    // window.imagePicker.OutputType.BASE64_STRING (1)
    outputType: int
};

所以你可以使用：

options = {
    maximumImagesCount: 3,
    width: 800,
    height: 600,
    quality: 50,
    outputType: 1
};

然后您可以使用 I've been researching 将图像放入 Firebase 存储中：

storageRef.putString("Your base64 string substring variable", 'base64');

我不确定这是否足以让您解决问题，但我想我还是会发布我发现的内容。

Answer 2

我刚试过这个，但它也不起作用。我不知道为什么...

constructor(private imagePicker: ImagePicker, private crop: Crop,
    private file: File) {
      let storageDb = firebase.storage();
      this.storageRef = storageDb.ref();
  }


pickImage() {
  this.imagePicker.getPictures(this.imagePickerOptions).then((results) 
=> {
    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < results.length; i++) {
      this.cropImage(results[i]);
    }
  }, (err) => {
    alert(err);
  });
}  


cropImage(imgPath) {
    this.crop.crop(imgPath, { quality: 50 })
      .then(
        newPath => {
          try {
            let n = newPath.lastIndexOf("/");
            let x = newPath.lastIndexOf("g");
            let nameFile = newPath.substring(n + 1, x + 1);
            this.file.readAsArrayBuffer(newPath, nameFile).then((res) => {
              let blob = new Blob([res], { type: "image/jpeg" });
              var uploadTask = this.storageRef.child('images/' + this.event.id).put(blob);
              uploadTask.on('state_changed', (snapshot) => {
                let url = uploadTask.snapshot.downloadURL;
                this.croppedImagepath = url;
              }, (error) => {
                alert("error: " + error);
              }, () => { 
                alert("uploaded");
                let url = uploadTask.snapshot.downloadURL;
                this.croppedImagepath = url;
              })
            })
          }
          catch (z) {
            alert('error beim erstellen des blobs' + z);
          }
        },
        error => {
          alert('Error cropping image' + error);
        }
      );
  }