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

Question

我正在使用 React Dropzone 进行文件上传。然后我生成 S3 putObject signedURL 并使用 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})}
      />
    )
  }
}

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