在 reactjs 中上传到 Firebase 存储之前如何调整图像大小

Question

我正在尝试调整我的用户上传的图片的大小，以提高我的网站的效率并限制我的存储空间使用量。

我从包 "react-image-file-resizer"

中创建了一个名为 resizeFile 的函数

现在我遇到的问题是如何在将图像上传到 firebase 存储之前调整图像大小？

这是我的代码：

const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 100, 0, (uri) => {
      resolve(uri);
    });
  });

const addProperty = async () => {
      if (
        !propName ||
     
      
      ) {
        alert("Please Enter All Required Data");
      } else {
        await firebase
          .firestore()
          .collection("Properties")
          .add({
            propname: propName,
        
          })
          .then(async (result) => {
            await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);// i dont know what to do after this point
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.put(uri).then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );
          });
      }
    };

编辑：

好吧，我设法解决了这个问题，但仍然存在一个问题，即由于某种原因，高度从未调整到我指定的 maxHeight。这是为什么？

这是我修改的：

await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.putString(uri,'data_url').then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );

Answer 1

我通过这种方式解决了 firebase 和图像大小调整问题。事实证明，该包确实会调整大小并将图像压缩为您指定的任何格式，但如果图像是另一种格式，例如 png（因为我指定了 JPEG），它不会完全按照您的喜好调整大小。然而，评论中有人提出它与firebase无关，并通过firebase函数解决了。

我所要做的就是使用 .putString() 以便将返回的 base64 转换为 firebase 存储中的字符串。因此，我的问题的答案实际上对 firebase 和 firebase 存储有很大的 link。

const resizeFile = file =>
  new Promise(resolve => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 25, 0, uri => {
      resolve(uri);
    });
  });

const addProperty = async () => {
  if (
    !propName ||
    !price ||
    !bedroom ||
    !bathroom ||
    !area ||
    !type ||
    !category ||
    !features ||
    !services
  ) {
    alert("Please Enter All Required Data");
  } else {
    await firebase
      .firestore()
      .collection("Properties")
      .add({
        propname: propName,
        price: price,
        bedrooms: bedroom,
        bathroom: bathroom,
        exclusive: exclusive,
        area: area,
        type: type,
        category: category,
        features: features,
        services: services,
        summary: summary,
        location: location,
        salesAgentID: salesAgent,
        date: getCurrentDate(),
      })
      .then(async result => {
        await Promise.all(
          selectedImages.map(async image => {
            const uri = await resizeFile(image);
            const storageRef = storage.ref(
              `propertyImages/${result.id}/${image.name}`
            );
            storageRef.putString(uri, "data_url").then(urls => {
              storageRef.getDownloadURL().then(downloadUrls => {
                console.log(downloadUrls);
                firebase
                  .firestore()
                  .collection("Properties")
                  .doc(result.id)
                  .update({
                    propertyID: result.id,
                    imageUrls:
                      firebase.firestore.FieldValue.arrayUnion(
                        downloadUrls
                      ),
                  })
                  .then(res => {
                    setIsUploaded("Uploaded success");

                    //handleUploadChange();
                    // alert("Property Added Successfully");
                    // window.location.reload();
                  });
              });
            });
          })
        );
      });
  }
};

在 reactjs 中上传到 Firebase 存储之前如何调整图像大小

How To Resize Image Before Uploading to Firebase Storage in reactjs

javascript

firebase

reactjs

firebase-storage

google-cloud-firestore