javascript - Firebase/Ionic4 上传和裁剪图片到存储

Question

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

我已经尝试过类似的方法。这有效，但我无法裁剪图像。但正如我提到的，无论如何我更喜欢使用 native 工具。

      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');

我不确定这是否足以让您修复，但我想我还是会发布我发现的内容。