如何在使用react-dropzone时压缩react中的图像

Question

我在我的下一个 JS 应用程序中使用 React dropzone 包。我想自动实现图像压缩。

首先在获得图像后，我将 blob/预览转换为文件阅读器。然后我使用了

compressorjs

包。但是我这样做之后图像没有被压缩？

当图像从 dropzone 传递时，如何压缩反应中的图像？

const [files, setFiles] = useState([]);
onDrop: (acceptedFiles) => {

const newFiles = acceptedFiles.map((file, index) => {
        return Object.assign(file, {
          preview: URL.createObjectURL(file),
        });
      });

if (files.length < 9) {
        setFiles((prev) => [...prev, ...newFiles]);

        files.map((file) => {
          newFiles.forEach((newFile) => {
            if (newFile.name == file.name) {
              alert(newFile.name + " is a duplicate file");

              setFiles(
                files,
                files.filter((val) => val !== newFile)
              );
            }
          });
        });
      } else if (acceptedFiles.length >= 9) {
        alert("select maximum of 9 images");
      } else {
        alert("maximum images to be selected is 9");
      }
    },
  });

const removeFile = (file) => () => {
    const newFiles = [...files];
    newFiles.splice(newFiles.indexOf(file), 1);
    setFiles(newFiles);
    if (files.length == 1) {
      setText("Drag and Drop or click here to upload Images");
    }
  };
  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
    return () => files.forEach((file) => URL.revokeObjectURL(file.preview));
  }, []);

我使用的compressorjs代码是

    acceptedFiles.map((file, index) => {
        const reader = new FileReader();

        reader.onload = function (e) {
new Compressor(e.target.result, {
    quality: 0.8,
    success: (compressedFile) => {
      setFiles((prev) => [
        ...prev,
        compressedFile
      ]);
    },
  });
          
        };
        reader.readAsDataURL(file);
        return file;
      });

请对此做出任何贡献。

Answer 1

有一些可用的软件包。我将给出一个使用 browser-image-compression 包的示例。

使用以下代码创建一个辅助函数：

// image compression

import imageCompression from 'browser-image-compression';

export const compressImages = async (images, options) => {
    const compressedImages = [];

    for (const image of images) {
        if (image.type.startsWith('image/')) {
            try {
                console.log(
                    `compressedFile size before->>>  ${
                        image.size / 1024 / 1024
                    } MB`,
                    image.size,
                ); // smaller than maxSizeMB

                const compressedFile = await imageCompression(image, options);

                console.log(
                    `compressedFile size after ->>> ${
                        compressedFile.size / 1024 / 1024
                    } MB`,
                ); // smaller than maxSizeMB

                compressedImages.push(compressedFile);
            } catch (error) {
                console.log(error);
                // Handle the error as needed
            }
        } else {
            compressedImages.push(image);
        }
    }

    return compressedImages;
};

让我们修改你的 onDrop 方法：

onDrop: async (acceptedFiles) => {

   //kindly check the library and change your settings from here
   const options = {
      maxSizeMB: 0.5,
      maxWidthOrHeight: 800,
      useWebWorker: true,
   };

   const newFiles = acceptedFiles.map((file, index) => {
      return Object.assign(file, {
         preview: URL.createObjectURL(file),
      });
   });

   const newCompressedImages = await compressImages(newFiles, options);

   //now do your task with the compressed image saved in newCompressedImages
};