Question

我正在使用React Dropzone进行文件上传。然后，我生成S3 putObject signatureURL，并使用axios将图像发送到S3。

它看起来像这样：

const {getRootProps, getInputProps} = useDropzone({
  onDrop: (acceptedFiles) => {
    const image = acceptedFiles[0]

    getS3SignedUrl(...)
      .then(path => {
        const options = {...}

        //????

        return axios.put(path, image, options)
      })

  }
})

一切正常，但图像非常大。我想减小图像的宽度/高度，将其缩小并降低质量，然后再将其发送到S3。

我看过类似的问题，但我不知道什么是最好的lib /方式。

有人可以帮我举个例子吗？

Answer 1

您可以使用react-imgpro库。以及如何使用。

import React from 'react';
import ProcessImage from 'react-imgpro';

class App extends React.Component {
  state = {
    src: '',
    err: null
  }

  render() {
    return (
      <ProcessImage
        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
        resize={{ width: 500, height: 500 }}
        colors={{
          mix: {
            color: 'mistyrose',
            amount: 20
          }
        }}
        processedImage={(src, err) => this.setState({ src, err})}
      />
    )
  }
}

处理后的图像将存储在状态中。

Answer 2

Cloudinary具有强大的功能，包括您想要的功能。您所要做的就是使用SDK，然后将图像与参数一起发送，并在其中调整图像的大小，然后将返回处理后的图像URL和图像，并将其存储在您的虚拟帐户的云中。我真的特别依赖Cloudinary NodeJS SDK。您可以查看ReactJS的SDK文档。 https://cloudinary.com/documentation/react_integration

Answer 3

您可以使用 react-image-file-resizer 包。

使用方法：

首先，包装这个 resizer：

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

然后在你的异步函数中使用它：

const onChange = async (event) => {
    try {
        const file = event.target.files[0];
        const image = await resizeFile(file);
        console.log(image);
    } catch(err) {
        console.log(err);
    }
}

在将图像发送到S3之前，在前端javascript中调整图像大小

3 个答案: