时间戳

首页 > 解决方案 > 在将图像发送到 S3 之前，在前端 javascript 中调整图像大小

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

问题描述

我正在使用 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/ 方法。

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

标签： javascriptreactjsreact-dropzone

解决方案

您可以使用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})}
      />
    )
  }
}

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

推荐阅读